JavaScrip高级应用：玩转模态与非模态

我们知道，对话框一般分为两种类型：模态类型（modal）与非模态类型（modeless）。所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。

成都创新互联公司主营瑞丽网站建设的网络公司,主营网站建设方案,APP应用开发,瑞丽h5微信平台小程序开发搭建,瑞丽网站营销推广欢迎瑞丽等地区企业咨询

推荐阅读：深入解读JavaScript中BOM和DOM

非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。本文的所有例子中，从层次上涉及到2个HTML页面。我们把第一个页面叫做caller页面，第二个页面叫做callee页面。也就是说，在caller页面执行代码创建生成callee页面。

一、创建模态和非模态对话框

首先，我们举个例子来快速了解一下什么是模态与非模态。在caller.htm中，我们输入以下代码：

 
 
 
      
  
  
  1.    
    2.   
  
  


  2.    
    3.   
  
  
  3.    
    4.   
  
  
  4.    
    5.   
  
  
  5. function fnOpenModal(){   
    6.   
  
  
  6. window.showModalDialog("callee.htm")   
    7.   
  
  
  7. }   
    8.   
  
  
  8. function fnOpenModeless(){   
    9.   
  
  
  9. window.showModelessDialog("callee.htm")   
    10.   
  
  
  10. }   
    11.   
  
  
  11.   
    12.

在浏览器中打开caller.htm，点击“创建模态对话框”按钮，将会出现一个对话框窗口，其中的内容是callee.htm。你会看到，除了关闭这个新窗口，无论怎样我们也不能将其他的窗口设置为“当前活动”窗口，这个一直是活动状态的窗口类型就是模态类型。

关闭这个模态对话框，回到caller.htm页面，点击“创建非模态对话框”，出现一个包含callee.htm页面的对话框窗口。这回有所不同，鼠标可以转移到其他地方使另外的窗口成为“当前活动”状态，这就是非模态的概念。接下来，我们看看创建模态对话框与非模态对话框的相关语法：

创建模态对话框：

 
 
 
      
  
  
  1. vReturnValue = window.showModalDialog(sURL [, vFreeArgument] [, sOrnaments]); 
    2.   
  
  
  2.  
    3.

创建非模态对话框：

 
 
 
      
  
  
  1. vReturnValue = window.showModelessDialog(sURL [, vFreeArgument] [, sOrnaments]);
    2.   
  
  
  2.   
    3.

从上面的语法我们得知：除了名字有所区别外，参数种类与含义都相同。以下是各参数的含义：

◆VReturnValue：对于showModalDialog()，它表示被打开的对话框窗口设置的returnValue属性值。对于showModelessDialog()，它表示新窗口对象。
 
◆VFreeArgument：这个参数可用于传递某种类型的数据到打开的对话框，数据可以是一个数值、字符串、数组或者一个对象类型。在新窗口中引用这个数值时，可通过新创建window对象的dialogArguments属性。

◆SOrnaments：用这个参数指定新窗口的外观。可选择的窗口属性有很多种，当有多种控制需求时，将相关内容用一个字符串连接起来，其间用分号隔开。以下是可选择的属性种类：

 
 
 
      
  
  
  1. o dialogHeight: sHeight    
    2.   
  
  
  2. o dialogLeft: sXpos    
    3.   
  
  
  3. o dialogTop: sYpos    
    4.   
  
  
  4. o dialogWidth: sWidth    
    5.   
  
  
  5. o center: ( yes | no | 1 | 0 | on | off )    
    6.   
  
  
  6. o dialogHide: ( yes | no | 1 | 0 | on | off )    
    7.   
  
  
  7. o edge: ( sunken | raised )    
    8.   
  
  
  8. o help: ( yes | no | 1 | 0 | on | off )    
    9.   
  
  
  9. o resizable: ( yes | no | 1 | 0 | on | off )    
    10.   
  
  
  10. o scroll: ( yes | no | 1 | 0 | on | off )    
    11.   
  
  
  11. o status: ( yes | no | 1 | 0 | on | off )   
    12.

除了以上属性外，我们还可以加入更加丰富的CSS控制。 以下我们来详细解释如何应用这些属性。

#p#

二、控制对话框大小和位置

控制对话框的大小和位置涉及到5个方面：高度（dialogHeight）、宽度（dialogWidth）、相对于桌面左上角的x坐标（dialogLeft）、y坐标（dialogTop）以及是否让对话框窗口居中（center）。

由于不同版本的Internet Explorer浏览器处理的默认度量单位并非一致，所以我们在指定高度、宽度等大小时，最好是同时设置好单位。单位种类包括很多，比如cm、mm、in、pt、pc、px。请注意：最小的高度值是100px。下面的代码将打开一个高200px、宽800px的对话框：

 
 
 
      
  
  
  1. window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px');
    2.   
  
  
  2.   
    3.

我们注意到，打开的新窗口会在桌面中处于居中的位置，这也正是居中属性（center）的默认值。居中属性（center）的可取值包括yes、no、1、0、on和off，含义一目了然。执行以下代码，看看关闭居中属性后新窗口的位置：

 
 
 
      
  
  
  1. window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;center:no'); 
    2.   
  
  
  2.  
    3.

我们看到，新窗口紧挨者桌面的左上角打开。当然，我们可以使用dialogLeft和dialogTop 属性来精确定义新窗口的打开位置。下面的代码将在相对于桌面左上角的x位置300px和y位置500px处打开新窗口：

 
 
 
      
  
  
  1. window.showModalDialog('callee.htm','','dialogHeight:200px;  
    2.   
  
  
  2. dialogWidth:800px;dialogLeft:300;   
    3.   
  
  
  3. dialogTop:500') 
    4.

注意，即使指定了居中属性，但如果同时设置了dialogLeft和dialogTop属性值，那么窗口位置将遵从后者。试一试执行下面的代码：

 
 
 
      
  
  
  1. window.showModalDialog('callee.htm','','  
    2.   
  
  
  2. dialogHeight:200px;dialogWidth:800px;dialogLeft:300;   
    3.   
  
  
  3. dialogTop:500;center:yes') 
    4.

#p#

三、改变对话框外观

对话框的外观控制包括从窗口边缘风格（edge）、是否存在滚动条（scroll）、是否包含上下文关联提示图标（help）、是否显示状态栏（status）以及是否可以改变窗口大小（resizable）等方面。默认情况下，新打开的窗口是大小不可改变的、边缘风格为凸起、在新窗口右上角显示一个上下文关联提示图标、存在滚动条，比如：

edge的可取值为sunken（凹陷）和raised（凸起），status、help、resizeable和scroll的可取值都是yes、no、1、0、on和off，其含义一目了然。下面的代码将去除上下文关联提示图标、不显示状态栏、窗口边缘风格为凹陷：

 
 
 
      
  
  
  1. showModelessDialog("callee.htm","","status:0;help:0;edge:sunken"); 
    2.   
  
  
  2.  
    3.

四、从caller页面传递数据到callee页面

上面我们介绍了创建模态和非模态窗口的语法以及如何控制新窗口的大小、位置和外观，接下来我们研究一下实际应用中更实用的功能：如何从caller页面传递数据到callee页面。从caller页面传递给callee页面的数据分为3类：传递值、传递数组引用以及传递对象,它们都是通过showModalDialog()和showModelessDialog()的第2个参数实现的。

（一）传递值类型数据

在caller.htm页面中输入以下代码：

 
 
 
      
  
  
  1.    
    2.   
  
  


  2.    
    3.   
  
  
  3.    
    4.   
  
  
  4.    
    5.   
  
  
  5.    
    6.   
  
  
  6.    
    7.   
  
  
  7. 在callee.htm页面中输入以下代码：   
    8.   
  
  
  8.    
    9.   
  
  
  9.    
    10.   
  
  
  10.   
    11.

在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的提示信息框，然后才出现新窗口。这种情况下，callee.htm页面中的window对象的属性dialogArguments将对应于caller.htm页面中的"打开了一个新模态窗口"或者"打开了一个新非模态窗口"。如果直接打开callee.htm，将会出现错误提示。

（二）传递数组引用类型数据

第一种值类型数据的传递中，在callee.htm页面中只能读取caller.htm页面的传递数据。当需要对caller.htm页面的传递内容进行修改时，就需使用到数组引用类型的传递方式。首先，在caller.htm页面中输入以下代码：

 
 
 
      
  
  
  1.    
    2.   
  
  


  2.    
    3.   
  
  
  3.    
    4.   
  
  
  4.    
    5.   
  
  
  5.    
    6.   
  
  
  6.    
    7.   
  
  
  7. 然后在callee.htm页面中输入以下代码：   
    8.   
  
  
  8.    
    9.   
  
  
  9.    
    10.   
  
  
  10.  
    11.

最后，在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的对话框，接着关闭这个对话框以及新打开的窗口，再次点击一个按钮，又出现一个对话框，从运行结果我们看到，在caller.htm页面中通过对数组a的地址引用，就可以实现在callee.htm中修改数组a的内容。 注意在callee.htm中要首先建立对传递数据的附值：a = dialogArguments。
 
（三）传递对象类型数据

在caller.htm和callee.htm中传递数据的最有效方式是通过对象方式进行，这不仅能实现从caller.htm到callee.htm的传递，还能从callee.htm传递到caller.htm。而且，我们还可以在caller.htm中定义对象的方法，再在callee.htm中使用它们。实际上，我们可以将caller.htm的window对象传递给callee.htm，这样就可以在callee.htm中访问caller.htm的变量及函数。 来看看一个实际的例子。在caller.htm中输入以下代码：

 
 
 
      
  
  
  1.    
    2.   
  
  
  2.    
    3.   
  
  
  3. 传递对象数据   
    4.   
  
  
  4.    
    5.   
  
  
  5.    
    6.   
  
  
  6.    
    7.   
  
  
  7. 输入你最喜欢的颜色: Yellow
        
    8.   
  
  
  8.    
    9.   
  
  
  9.    
    10.   
  
  
  10.    
    11.   
  
  
  11. 在callee.htm中输入以下代码：   
    12.   
  
  
  12.    
    13.   
  
  
  13.    
    14.   
  
  
  14. callee.html   
    15.   
  
  
  15.    
    16.   
  
  
  16.    
    17.   
  
  
  17.    
    18.   
  
  
  18. 输入你最喜欢的颜色:

       
    19.   
  
  
  19.    
    20.   
  
  
  20.    
    21.   
  
  
  21.    
    22.   
  
  
  22.    
    23.   
  
  
  23.  
    24.

在浏览器中打开caller.htm，点击“显示非模态对话框”按钮，出现新对话框，在对话框中输入其他颜色名称，点击“Apply”按钮后，执行callee.htm中的getInfoAndUpdate函数：

 
 
 
      
  
  
  1. function getInfoAndUpdate() {   
    2.   
  
  
  2. var callerWindowObj = dialogArguments;   
    3.   
  
  
  3. callerWindowObj.sColor = oEnterColor.value;   
    4.   
  
  
  4. callerWindowObj.update();   
    5.   
  
  
  5. }  
    6.

因为在caller.htm中传递给callee.htm的是对象类型数据window，所以经过第一条语句的附值，callerWindowObj就指向了caller.htm页面，然后就可以在callee.htm中按照callerWindowObj.xxx的形式引用caller.htm中的变量及函数：callerWindowObj.sColor = oEnterColor.value负责将callee.htm中输入的颜色名称传递给caller.htm中的变量sColor，然后再执行caller.htm中的 update()函数更新显示信息。可以看到，通过对象方式传递数据，功能很丰富强大，而且使用起来也不复杂。

结语

以上对使用JavaScript语言操作模态和非模态对话框进行了详细介绍，相信你又掌握了在html页面中创建窗口的一个新技术。在实际应用中，模态对话框的功能比较实用，可用于必须让访问者阅读相关内容的情况下。另外，利用对象方式在窗口间传递数据，功能非常强大但使用却不复杂，是非常值得一用的技术。

【编辑推荐】

  1. 深入解读JavaScript中BOM和DOM
  2. 揭开Javascript闭包的真实面目
  3. 拔开云雾见明月 透析JavaScript定时机制
  4. 早该知道的7个JavaScript技巧
  5. 那些不为人熟知的JavaScript技巧

文章标题：JavaScrip高级应用：玩转模态与非模态
网页网址：http://www.hantingmc.com/qtweb/news28/136428.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

python知识

分类信息网站

传美奇电器　　 　攀枝花网站建设　　 　网站建设公司　　 　成都定制网站　　 　成都微信小程序开发　　 　橡塑保温材料　　 　固迪佳新材料　　 　域名申请　　 　名片印刷厂　　 　郫县门窗定制　　 　建站公司　　 　四川成都托管服务器　　 　彭州网站建设　　 　西信服务器托管　　 　泸县网站建设　　 　眉山网站建设　　 　绵阳服务器托管　　 　力比特机械　　 　四川瑞杰　　 　企业官网建设