天天看点
返回

弹出网页窗口 模态（modal）和非模态（modeless）的区别 控制对话框大小和位置 改变对话框外观 实例

通过window.open弹出窗口

<span style="font-size:14px;">			var url = "BudgetZXScoreAction.do?method=searchRanking&&todo_id=<%=todo_id%>";        //转向网页的地址;
  			var name = "查看排名";                    //网页名称，可为空;
  			var iWidth = 700;                         //弹出窗口的宽度;
  			var iHeight = 500;                        //弹出窗口的高度;
  			//获得窗口的垂直位置;
			var iTop = (window.screen.availHeight-30-iHeight)/2;
			//获得窗口的水平位置;           
			var iLeft = (window.screen.availWidth-10-iWidth)/2; 
                        window.open(url,name,'height='+iHeight+',innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+'</span><span style="font-size:10px;">,<span style="font-family: Arial, Helvetica, sans-serif;">toolbar=no,menubar=no, scrollbars=auto,resizeable=no,location=no,status=no');</span></span>

alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 

alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 

depended | yes/no | 是否和父窗口同时关闭 

directories | yes/no | Nav2和3的目录栏是否可见 

height | pixel value | 窗口高度 

hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 

innerHeight | pixel value | 窗口中文档的像素高度 

innerWidth | pixel value | 窗口中文档的像素宽度 

location | yes/no | 位置栏是否可见 

menubar | yes/no | 菜单栏是否可见 

outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 

outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 

resizable | yes/no | 窗口大小是否可调整 

screenX | pixel value | 窗口距屏幕左边界的像素长度 

screenY | pixel value | 窗口距屏幕上边界的像素长度 

scrollbars | yes/no | 窗口是否可有滚动栏 

titlebar | yes/no | 窗口题目栏是否可见 

toolbar | yes/no | 窗口工具栏是否可见 

Width | pixel value | 窗口的像素宽度 

z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

得到屏幕的宽度：

alert(screen.width);

alert(window.screen.availWidth);

得到屏幕的高度：

alert(screen.height);

alert(window.screen.availHeight);

通过window.showModalDialog方式弹出窗口

基本介绍：

showModalDialog() (IE 4+ 支持)

showModelessDialog() (IE 5+ 支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。

window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法：

vReturnValue = window.showModalDialog(sURL , vArguments ,sFeatures)

vReturnValue = window.showModelessDialog(sURL, vArguments,sFeatures)

参数说明：

sURL--

必选参数，类型：字符串。用来指定对话框要显示的文档的URL。

vArguments--

可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures--

可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。

1.dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。

2.dialogWidth: 对话框宽度。

3.dialogLeft: 离屏幕左的距离。

4.dialogTop: 离屏幕上的距离。

5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。

6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。

7.resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。

8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

下面几个属性是用在HTA中的，在一般的网页中一般不使用。

10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。

11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。

12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

参数传递：

1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：

-------------------------------

parent.htm

<script>

var obj = new Object();

obj.name="51js";

window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");

</script>

modal.htm

<script>

var obj = window.dialogArguments

alert("您传递的参数为：" + obj.name)

</script>

-------------------------------

2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

------------------------------

parent.htm

<script>

str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");

alert(str);

</script>

modal.htm

<script>

window.returnValue="http://www.51js.com";

</script>

币种定义部分 

var psAddStr="ProcessID="+ProcessID+"&AddFlag="+isAddFlag+"&BZBH="+vsBZBH+"&BZMC="+vsBZMC+"&BZFH="+vsBZFH+"&JD="+vsJD;

 var Result=window.showModalDialog("addSave.asp?"+psAddStr,'',"dialogHeight:250px;dialogWidth:250px;status:no;");

将参数传递与返回结果结合在一起的实例

ParentPage.aspx

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script language="javascript" type="text/javascript">

        function openwindow() {

            var obj = new Object();

            obj.value = "3";

            obj.name = "4";

            obj.sew = "5";

            str =window.showModalDialog("ChildPage.aspx",obj,"dialogWidth=200px;dialogHeight=100px");

            alert(str);

        }

        function openModelessDialog() {

            var obj = new Object();

            obj.value = "3";

            obj.name = "4";

            obj.sew = "5";

            str = window.showModelessDialog("ChildPage.aspx", obj, "dialogWidth=200px;dialogHeight=100px");

            alert(str);

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <input type="button" id="btnOpen" value="打开模态窗口" οnclick="openwindow();" />

    <input type="button" id="Button1" value="打开非模态窗口" οnclick="openModelessDialog();" />

    </div>

    </form>

</body>

</html>

ChildPage.aspx

<html xmlns=" http://www.w3.org/1999/xhtml"> <head runat="server">

    <title></title>

    <script language="javascript" type="text/javascript">

        function getArguments() {

            var obj = window.dialogArguments

            alert("您传递的参数为：" + obj.value)

        }

        function windowclose() {

            window.returnValue = "childPage.Close";

        }

    </script>

</head>

<body οnunlοad="windowclose();">

    <form id="form1" runat="server">

    <div>

    <input type="button" id="btnOpen" value="打开窗口" οnclick="getArguments();" />

    <input type="button" id="btnClose" value="关闭窗口" οnclick='self.close(); ' />

    </div>

    </form>

</body>

</html>

在子窗口中就可以通过window.dialogArguments获取父窗口对象，

通过window.dialogArguments.document.getElementById("parentMenuName")来获取父窗口中的id为parentMenuName的dom对象通过window.dialogArguments.document.getElementById("mnId");来获取父窗口中的id为mnId的dom对象

再通过下面的语句，就可以在子窗口的js代码中为父窗口中的dom元素赋值

val.value="部门";

val2.vlue="0102999"

最后通过window.close();关掉子窗口

模态（modal）和非模态（modeless）的区别

所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话 框。非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。

本文介绍如何使用JavaScript语言来创建这两种类型的对话 框、控制其大小和位置、改变其外观以及在对话框间的数据传递。本文的所有例程中，从层次上涉及到2个HTML页面。我们把第一个页面叫做caller页面，第二个页面叫做callee页面。也就是说，在caller页面执行代码创建生成callee页面。

创建模态和非模态对话框 

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

Html代码  

弹出网页窗口 模态（modal）和非模态（modeless）的区别 控制对话框大小和位置 改变对话框外观 实例
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <script language="javascript">   
  5. function fnOpenModal(){   
  6. window.showModalDialog("callee.htm")   
  7. }   
  8. function fnOpenModeless(){   
  9. window.showModelessDialog("callee.htm")   
  10. }   
  11. </script>   
  12.  </HEAD>  
  13.  <BODY>  
  14.   <INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()">   
  15. <br><br>   
  16. <INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()">   
  17.  </BODY>  
  18. </HTML>  

在 浏览器中打开caller.htm，点击“创建模态对话框”按钮，将会出现一个对话框窗口，其中的内容是callee.htm。你会看到，除了关闭这个新 窗口，无论怎样我们也不能将其他的窗口设置为“当前活动”窗口，这个一直是活动状态的窗口类型就是模态类型。关闭这个模态对话框，回到 caller.htm页面，点击“创建非模态对话框”，出现一个包含callee.htm页面的对话框窗口。这回有所不同，鼠标可以转移到其他地方使另外 的窗口成为“当前活动”状态，这就是非模态的概念。 

控制对话框大小和位置

控制对话框的大小和位置涉及到5个方面：高度（dialogHeight）、宽度（dialogWidth）、相对于桌面左上角的x坐标 （dialogLeft）、y坐标（dialogTop）以及是否让对话框窗口居中（center）。由于不同版本的Internet Explorer浏览器处理的默认度量单位并非一致，所以我们在指定高度、宽度等大小时，最好是同时设置好单位。单位种类包括很多，比如cm、mm、 in、pt、pc、px。请注意：最小的高度值是100px。 

下面的代码将打开一个高200px、宽800px的对话框： 

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

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

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

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

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

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

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

改变对话框外观

对话框的外观控制包括从窗口边缘风格（edge）、是否存在滚动条（scroll）、是否包含上下文关联提示图标（help）、是否显示状态栏 （status）以及是否可以改变窗口大小（resizable）等方面。默认情况下，新打开的窗口是大小不可改变的、边缘风格为凸起、在新窗口右上角显 示一个上下文关联提示图标、存在滚动条，比如： edge的可取值为sunken（凹陷）和raised（凸起），status、help、resizeable和scroll的可取值都是yes、no、1、0、on和off，其含义一目了然。 

下面的代码将去除上下文关联提示图标、不显示状态栏、窗口边缘风格为凹陷： 

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

实例

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

（一）传递值类型数据 

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

Html代码  

弹出网页窗口 模态（modal）和非模态（modeless）的区别 控制对话框大小和位置 改变对话框外观 实例
  1. <INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()">   
  2. <br><br>   
  3. <INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()">   
  4. <script language="javascript">   
  5. <!--   
  6. function fnOpenModal(){   
  7. window.showModalDialog("callee.htm","打开了一个新模态窗口")   
  8. }   
  9. function fnOpenModeless(){   
  10. window.showModelessDialog("callee.htm","打开了一个新非模态窗口")   
  11. }   
  12. // -->   
  13. </script>   
  14. 在callee.htm页面中输入以下代码：   
  15. <SCRIPT LANGUAGE="JavaScript">   
  16. <!--   
  17. alert(dialogArguments);   
  18. // -->   
  19. </SCRIPT>   

 在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的提示信息框： 

然后才出现新窗口。这种情况下，callee.htm页面中的window对象的属性dialogArguments将对应于caller.htm页面中的"打开了一个新模态窗口"或者"打开了一个新非模态窗口"。如果直接打开callee.htm，将会出现错误提示。 

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

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

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

Java代码  

弹出网页窗口 模态（modal）和非模态（modeless）的区别 控制对话框大小和位置 改变对话框外观 实例
  1. <INPUT TYPE="button" VALUE="创建模态对话框" οnclick="fnOpenModal()">   
  2. <br><br>   
  3. <INPUT TYPE="button" VALUE="创建非模态对话框" οnclick="fnOpenModeless()">   
  4. <script language="javascript">   
  5. <!--   
  6. var a = new Array;   
  7. a[0]="first";   
  8. a[1]="second";   
  9. a[2]="third";   
  10. function fnOpenModal(){   
  11. window.showModalDialog("callee.htm",a)   
  12. }   
  13. function fnOpenModeless(){   
  14. window.showModelessDialog("callee.htm",a)   
  15. }   
  16. // -->   
  17. </script>   
  18. 然后在callee.htm页面中输入以下代码：   
  19. <SCRIPT LANGUAGE="JavaScript">   
  20. <!--   
  21. a = dialogArguments;   
  22. alert(a);   
  23. a[0] = "fourth";   
  24. // -->   
  25. </SCRIPT>   

最后，在浏览器中打开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中输入以下代码：

Html代码  

弹出网页窗口 模态（modal）和非模态（modeless）的区别 控制对话框大小和位置 改变对话框外观 实例
  1. <HTML>   
  2. <HEAD>   
  3. <TITLE>传递对象数据</TITLE>   
  4. <SCRIPT>   
  5. var sColor="";    
  6. function callDialog() {   
  7. showModelessDialog("callee.html",window,"status:false;dialogWidth:300px;dialogHeight:150px");   
  8. }   
  9. function update()   
  10. {   
  11. oColor.innerText = sColor;   
  12. }   
  13. </SCRIPT>   
  14. </HEAD>   
  15. <BODY>   
  16. <P>输入你最喜欢的颜色: <SPAN ID="oColor" STYLE="color:red;font-size:24">Yellow</SPAN></P>    
  17. <INPUT TYPE="button" VALUE="Display Modeless Dialog" onclick="callDialog()">   
  18. </BODY>   
  19. </HTML>   
  20. 在callee.htm中输入以下代码：   
  21. <HTML>   
  22. <HEAD>   
  23. <TITLE>callee.html</TITLE>   
  24. <SCRIPT>   
  25. function getInfoAndUpdate() {   
  26. var callerWindowObj = dialogArguments;   
  27. callerWindowObj.sColor = oEnterColor.value;   
  28. callerWindowObj.update();   
  29. }   
  30. function cancel() {   
  31. var callerWindowObj = dialogArguments;   
  32. callerWindowObj.sColor = "Yellow";   
  33. callerWindowObj.update();    
  34. }   
  35. </SCRIPT>   
  36. </HEAD>   
  37. <BODY>   
  38. 输入你最喜欢的颜色:<INPUT ID=oEnterColor><BR><BR>   
  39. <INPUT VALUE="Apply" TYPE=button onclick="getInfoAndUpdate();">   
  40. <INPUT VALUE="Ok" TYPE=button onclick="getInfoAndUpdate();window.close();">   
  41. <INPUT VALUE="Cancel" TYPE=button onclick="cancel();window.close();">   
  42. </BODY>   
  43. </HTML>    

在浏览器中打开caller.htm，点击“显示非模态对话框”按钮，出现新对话框： 

在对话框中输入其他颜色名称，点击“Apply”按钮后，执行callee.htm中的getInfoAndUpdate函数：

Js代码  

弹出网页窗口 模态（modal）和非模态（modeless）的区别 控制对话框大小和位置 改变对话框外观 实例
  1. function getInfoAndUpdate() {   
  2. var callerWindowObj = dialogArguments;   
  3. callerWindowObj.sColor = oEnterColor.value;   
  4. callerWindowObj.update();   
  5. }   

因 为在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()函数更新显示信息。 

可以看到，通过对象方式传递数据，功能很丰富强大，而且使用起来也不复杂

IT海洋——js js javascript jsp 弹出窗口
上一篇: 个人门户系统设计
下一篇: isprintable在python中的意思,为什么Python的string.printable包含不可打印的字符？

继续阅读