showModalDialog()、showModelessDialog()方法使用详解

2023-09-16 12:32:45 终极管理员知识笔记 54阅读

amp;nbsp;window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> 当我们用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时， 打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。而模态［ＩＥ４］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>使用方法如下：  <img src="/Images/OutliningIndicators/None.gif" align="top"/> vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])  <img src="/Images/OutliningIndicators/None.gif" align="top"/> vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])  <img src="/Images/OutliningIndicators/None.gif" align="top"/>参数说明：  <img src="/Images/OutliningIndicators/None.gif" align="top"/> sURL  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 必选参数，类型：字符串。用来指定对话框要显示的文档的URL。  <img src="/Images/OutliningIndicators/None.gif" align="top"/> vArguments  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。  <img src="/Images/OutliningIndicators/None.gif" align="top"/> sFeatures  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 　　dialogWidth: 对话框宽度。  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 　　dialogLeft: 距离桌面左的距离。  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 　　dialogTop: 离桌面上的距离。  <img id="Codehighlighter1_1136_1154_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_1136_1154_Open_Text.style.display='none'; Codehighlighter1_1136_1154_Closed_Image.style.display='inline'; Codehighlighter1_1136_1154_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_1136_1154_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_1136_1154_Closed_Text.style.display='none'; Codehighlighter1_1136_1154_Open_Image.style.display='inline'; Codehighlighter1_1136_1154_Open_Text.style.display='inline';"/> 　　center: <img src='/Images/dot.gif'>{yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。  <img id="Codehighlighter1_1192_1210_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_1192_1210_Open_Text.style.display='none'; Codehighlighter1_1192_1210_Closed_Image.style.display='inline'; Codehighlighter1_1192_1210_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_1192_1210_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_1192_1210_Closed_Text.style.display='none'; Codehighlighter1_1192_1210_Open_Image.style.display='inline'; Codehighlighter1_1192_1210_Open_Text.style.display='inline';"/> 　　help: <img src='/Images/dot.gif'>{yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。  <img id="Codehighlighter1_1243_1261_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_1243_1261_Open_Text.style.display='none'; Codehighlighter1_1243_1261_Closed_Image.style.display='inline'; Codehighlighter1_1243_1261_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_1243_1261_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_1243_1261_Closed_Text.style.display='none'; Codehighlighter1_1243_1261_Open_Image.style.display='inline'; Codehighlighter1_1243_1261_Open_Text.style.display='inline';"/> 　　resizable: <img src='/Images/dot.gif'>{yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。  <img id="Codehighlighter1_1297_1315_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_1297_1315_Open_Text.style.display='none'; Codehighlighter1_1297_1315_Closed_Image.style.display='inline'; Codehighlighter1_1297_1315_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_1297_1315_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_1297_1315_Closed_Text.style.display='none'; Codehighlighter1_1297_1315_Open_Image.style.display='inline'; Codehighlighter1_1297_1315_Open_Text.style.display='inline';"/> 　　status: <img src='/Images/dot.gif'>{yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。  <img id="Codehighlighter1_1371_1401_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_1371_1401_Open_Text.style.display='none'; Codehighlighter1_1371_1401_Closed_Image.style.display='inline'; Codehighlighter1_1371_1401_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_1371_1401_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_1371_1401_Closed_Text.style.display='none'; Codehighlighter1_1371_1401_Open_Image.style.display='inline'; Codehighlighter1_1371_1401_Open_Text.style.display='inline';"/>  scroll:<img src='/Images/dot.gif'>{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>  还有几个属性是用在HTA中的，在一般的网页中一般不使用。  <img id="Codehighlighter1_1471_1501_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_1471_1501_Open_Text.style.display='none'; Codehighlighter1_1471_1501_Closed_Image.style.display='inline'; Codehighlighter1_1471_1501_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_1471_1501_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_1471_1501_Closed_Text.style.display='none'; Codehighlighter1_1471_1501_Open_Image.style.display='inline'; Codehighlighter1_1471_1501_Open_Text.style.display='inline';"/>  dialogHide:<img src='/Images/dot.gif'>{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。  <img id="Codehighlighter1_1536_1554_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_1536_1554_Open_Text.style.display='none'; Codehighlighter1_1536_1554_Closed_Image.style.display='inline'; Codehighlighter1_1536_1554_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_1536_1554_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_1536_1554_Closed_Text.style.display='none'; Codehighlighter1_1536_1554_Open_Image.style.display='inline'; Codehighlighter1_1536_1554_Open_Text.style.display='inline';"/>  edge:<img src='/Images/dot.gif'>{ sunken | raised }：指明对话框的边框样式。默认为raised。  <img id="Codehighlighter1_1591_1621_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_1591_1621_Open_Text.style.display='none'; Codehighlighter1_1591_1621_Closed_Image.style.display='inline'; Codehighlighter1_1591_1621_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_1591_1621_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_1591_1621_Closed_Text.style.display='none'; Codehighlighter1_1591_1621_Open_Image.style.display='inline'; Codehighlighter1_1591_1621_Open_Text.style.display='inline';"/>  unadorned:<img src='/Images/dot.gif'>{ yes | no | 1 | 0 | on | off }：默认为no。  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> 传入参数：  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> test1.htm  <img src="/Images/OutliningIndicators/None.gif" align="top"/> ====================  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  var mxh1 = new Array("mxh","net_lover","孟子E章")  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  var mxh2 = window.open("about:blank","window_mxh")  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  // 向对话框传递数组  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  window.showModalDialog("test2.htm",mxh1)  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  // 向对话框传递window对象  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  window.showModalDialog("test3.htm",mxh2)  <img src="/Images/OutliningIndicators/None.gif" align="top"/> </script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> test2.htm  <img src="/Images/OutliningIndicators/None.gif" align="top"/> ====================  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  var a = window.dialogArguments  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  alert("您传递的参数为：" + a)  <img src="/Images/OutliningIndicators/None.gif" align="top"/> </script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> test3.htm  <img src="/Images/OutliningIndicators/None.gif" align="top"/> ====================  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  var a = window.dialogArguments  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  alert("您传递的参数为window对象，名称：" + a.name)  <img src="/Images/OutliningIndicators/None.gif" align="top"/> </script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> 可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> test4.htm  <img src="/Images/OutliningIndicators/None.gif" align="top"/> ===================  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  var a = window.showModalDialog("test5.htm")  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  for(i=0;i<a.length;i++) alert(a[i])  <img src="/Images/OutliningIndicators/None.gif" align="top"/> </script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> test5.htm  <img src="/Images/OutliningIndicators/None.gif" align="top"/> ===================  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> function sendTo()  <img id="Codehighlighter1_2511_2587_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_2511_2587_Open_Text.style.display='none'; Codehighlighter1_2511_2587_Closed_Image.style.display='inline'; Codehighlighter1_2511_2587_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_2511_2587_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_2511_2587_Closed_Text.style.display='none'; Codehighlighter1_2511_2587_Open_Image.style.display='inline'; Codehighlighter1_2511_2587_Open_Text.style.display='inline';"/> <img src='/Images/dot.gif'>{  <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>  var a=new Array("a","b")  <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>  window.returnValue = a  <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>  window.close()  <img src="/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top"/> }  <img src="/Images/OutliningIndicators/None.gif" align="top"/> </script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <body>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <form>  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  <input value="返回" type=button onclick="sendTo()">  <img src="/Images/OutliningIndicators/None.gif" align="top"/> </form>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> 常见问题：  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 1，如何在模态对话框中进行提交而不新开窗口？  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe，提交时可以制定target为该iframe的name。对于IE4+，你可以用高度为0的frame来作：例子，  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> test6.htm  <img src="/Images/OutliningIndicators/None.gif" align="top"/> ===================  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  window.showModalDialog("test7.htm")  <img src="/Images/OutliningIndicators/None.gif" align="top"/> </script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> test7.htm  <img src="/Images/OutliningIndicators/None.gif" align="top"/> ===================  <img src="/Images/OutliningIndicators/None.gif" align="top"/> if(window.location.search) alert(window.location.search)  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <frameset rows="0,*">  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  <frame src="about:blank">  <img src="/Images/OutliningIndicators/None.gif" align="top"/>  <frame src="test8.htm">  <img src="/Images/OutliningIndicators/None.gif" align="top"/> </frameset>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> test8.htm  <img src="/Images/OutliningIndicators/None.gif" align="top"/> ===================  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <form target="_self" method="get">  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <input name=txt value="test">  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <input type=submit>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> </form>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> if(window.location.search) alert(window.location.search)  <img src="/Images/OutliningIndicators/None.gif" align="top"/> </script>  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗？  <img src="/Images/OutliningIndicators/None.gif" align="top"/> 答案是不能。但在frame里是可以的。  <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>------------------------------------------------------------------------------------------------- <img src="/Images/OutliningIndicators/None.gif" align="top"/>【2、经过设置后的弹出窗口】    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　   <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。 我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　   <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<SCRIPT LANGUAGE="javascript">    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</SCRIPT>     <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　   <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　参数解释：    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　   <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<SCRIPT LANGUAGE="javascript"> js脚本开始；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　window.open 弹出新窗口的命令；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　'page.html' 弹出窗口的文件名；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　height=100 窗口高度；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　width=400 窗口宽度；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　top=0 窗口距离屏幕上方的象素值；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　left=0 窗口距离屏幕左侧的象素值；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　toolbar=no 是否显示工具栏，yes为显示；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　menubar，scrollbars 表示菜单栏和滚动栏。    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　resizable=no 是否允许改变窗口大小，yes为允许；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　location=no 是否显示地址栏，yes为允许；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</SCRIPT> js脚本结束   <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　     <img src="/Images/OutliningIndicators/None.gif" align="top"/>　 【3、用函数控制弹出窗口】    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　   <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　下面是一个完整的代码。    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<html>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<head>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<script LANGUAGE="javascript">    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</script>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</head>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<body onload="openwin()">    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　任意的页面内容<img src='/Images/dot.gif'>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</body>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</html>    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　方法三：用一个连接调用：    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<a href="#" onclick="openwin()">打开一个窗口</a>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　注意：使用的“#”是虚连接。    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　方法四：用一个按钮调用：    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<input type="button" onclick="openwin()" value="打开窗口">    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　     <img src="/Images/OutliningIndicators/None.gif" align="top"/>　 【4、同时弹出2个窗口】    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　   <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　 对源代码稍微改动一下：    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　   <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<script LANGUAGE="javascript">    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</script>   <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可 。最后用上面说过的四种方法调用即可。    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。     <img src="/Images/OutliningIndicators/None.gif" align="top"/>     <img src="/Images/OutliningIndicators/None.gif" align="top"/>　 【5、主窗口打开文件1.htm，同时弹出小窗口page.html】    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　如下代码加入主窗口<head>区：    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<script language="javascript">    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</script>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　加入<body>区：    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<a href="1.htm" onclick="openwin()">open</a>即可。    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>     <img src="/Images/OutliningIndicators/None.gif" align="top"/>　 【6、弹出的窗口之定时关闭控制】    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　   <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段 代码加入弹出的页面(注意是加入page.html的HTML中，可不是主页面中，否则 <img src='/Images/dot.gif'>)，让它10秒后自动关闭是不是更酷了？    <img src="/Images/OutliningIndicators/None.gif" align="top"/>首先，将如下代码加入page.html文件的<head>区：    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<script language="javascript">    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　function closeit()    <img id="Codehighlighter1_6216_6266_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_6216_6266_Open_Text.style.display='none'; Codehighlighter1_6216_6266_Closed_Image.style.display='inline'; Codehighlighter1_6216_6266_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_6216_6266_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_6216_6266_Closed_Text.style.display='none'; Codehighlighter1_6216_6266_Open_Image.style.display='inline'; Codehighlighter1_6216_6266_Open_Text.style.display='inline';"/>　　<img src='/Images/dot.gif'>{    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　setTimeout("self.close()",10000) //毫秒    <img src="/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top"/>　　}    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</script>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　然后，再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗 口的代码，10秒钟后就自行关闭该窗口。)    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　 【7、在弹出窗口中加上一个关闭按钮】    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<FORM>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<INPUT TYPE='BUTTON' value='关闭' onClick='window.close()'>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</FORM>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　呵呵，现在更加完美了！   <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　 【8、内包含的弹出窗口-一个页面两个窗口】    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<html>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<head>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<SCRIPT LANGUAGE="javascript">    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　function openwin()    <img id="Codehighlighter1_6711_7172_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_6711_7172_Open_Text.style.display='none'; Codehighlighter1_6711_7172_Closed_Image.style.display='inline'; Codehighlighter1_6711_7172_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_6711_7172_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_6711_7172_Closed_Text.style.display='none'; Codehighlighter1_6711_7172_Open_Image.style.display='inline'; Codehighlighter1_6711_7172_Open_Text.style.display='inline';"/>　　<img src='/Images/dot.gif'>{    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no ,scrollbars="+scroll+",menubar=no");    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　//写成一行    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　OpenWindow.document.write("<TITLE>例子</TITLE>")    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　OpenWindow.document.write("<h1>Hello!</h1>")    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　OpenWindow.document.write("New window opened!")    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　OpenWindow.document.write("</BODY>")    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　OpenWindow.document.write("</HTML>")    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　OpenWindow.document.close()    <img src="/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top"/>　　}    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</SCRIPT>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</head>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<body>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<a href="#" onclick="openwin()">打开一个窗口</a>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<input type="button" onclick="openwin()" value="打开窗口">    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</body>    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</html>    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　看看OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照 格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　 【9、终极应用--弹出的窗口之Cookie控制】    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定 没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(   <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　有解决的办法吗？Yes! ;-) Follow me.我们使用cookie来控制一下就可以了。    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　首先，将如下代码加入主页面HTML的<HEAD>区：    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　<script>    <img id="Codehighlighter1_7737_7800_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_7737_7800_Open_Text.style.display='none'; Codehighlighter1_7737_7800_Closed_Image.style.display='inline'; Codehighlighter1_7737_7800_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_7737_7800_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_7737_7800_Closed_Text.style.display='none'; Codehighlighter1_7737_7800_Open_Image.style.display='inline'; Codehighlighter1_7737_7800_Open_Text.style.display='inline';"/>　　function openwin()<img src='/Images/dot.gif'>{    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　window.open("page.html","","width=200,height=200")    <img src="/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top"/>　　}    <img id="Codehighlighter1_7833_8249_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_7833_8249_Open_Text.style.display='none'; Codehighlighter1_7833_8249_Closed_Image.style.display='inline'; Codehighlighter1_7833_8249_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_7833_8249_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_7833_8249_Closed_Text.style.display='none'; Codehighlighter1_7833_8249_Open_Image.style.display='inline'; Codehighlighter1_7833_8249_Open_Text.style.display='inline';"/>　　function get_cookie(Name) <img src='/Images/dot.gif'>{    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　var search = Name + "="    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　var returnvalue = "";    <img id="Codehighlighter1_7929_8217_Open_Image" src="/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_7929_8217_Open_Text.style.display='none'; Codehighlighter1_7929_8217_Closed_Image.style.display='inline'; Codehighlighter1_7929_8217_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_7929_8217_Closed_Image" src="/Images/OutliningIndicators/ContractedSubBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_7929_8217_Closed_Text.style.display='none'; Codehighlighter1_7929_8217_Open_Image.style.display='inline'; Codehighlighter1_7929_8217_Open_Text.style.display='inline';"/>　　if (documents.cookie.length > 0) <img src='/Images/dot.gif'>{    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　offset = documents.cookie.indexOf(search)    <img id="Codehighlighter1_8001_8210_Open_Image" src="/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_8001_8210_Open_Text.style.display='none'; Codehighlighter1_8001_8210_Closed_Image.style.display='inline'; Codehighlighter1_8001_8210_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_8001_8210_Closed_Image" src="/Images/OutliningIndicators/ContractedSubBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_8001_8210_Closed_Text.style.display='none'; Codehighlighter1_8001_8210_Open_Image.style.display='inline'; Codehighlighter1_8001_8210_Open_Text.style.display='inline';"/>　　if (offset != -1) <img src='/Images/dot.gif'>{    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　offset += search.length    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　end = documents.cookie.indexOf(";", offset);    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　if (end == -1)    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　end = documents.cookie.length;    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　returnvalue=unescape(documents.cookie.substring(offset, end))    <img src="/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top"/>　　}    <img src="/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top"/>　　}    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　return returnvalue;    <img src="/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top"/>　　} 　   <img id="Codehighlighter1_8277_8377_Open_Image" src="/Images/OutliningIndicators/ExpandedBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_8277_8377_Open_Text.style.display='none'; Codehighlighter1_8277_8377_Closed_Image.style.display='inline'; Codehighlighter1_8277_8377_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_8277_8377_Closed_Image" src="/Images/OutliningIndicators/ContractedBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_8277_8377_Closed_Text.style.display='none'; Codehighlighter1_8277_8377_Open_Image.style.display='inline'; Codehighlighter1_8277_8377_Open_Text.style.display='inline';"/>　　function loadpopup()<img src='/Images/dot.gif'>{    <img id="Codehighlighter1_8313_8370_Open_Image" src="/Images/OutliningIndicators/ExpandedSubBlockStart.gif" align="top" onClick="this.style.display='none'; Codehighlighter1_8313_8370_Open_Text.style.display='none'; Codehighlighter1_8313_8370_Closed_Image.style.display='inline'; Codehighlighter1_8313_8370_Closed_Text.style.display='inline';"/><img id="Codehighlighter1_8313_8370_Closed_Image" src="/Images/OutliningIndicators/ContractedSubBlock.gif" align="top" style="display: none;" onClick="this.style.display='none'; Codehighlighter1_8313_8370_Closed_Text.style.display='none'; Codehighlighter1_8313_8370_Open_Image.style.display='inline'; Codehighlighter1_8313_8370_Open_Text.style.display='inline';"/>　　if (get_cookie('popped')=='')<img src='/Images/dot.gif'>{    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　openwin()    <img src="/Images/OutliningIndicators/InBlock.gif" align="top"/>　　documents.cookie="popped=yes"    <img src="/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" align="top"/>　　}    <img src="/Images/OutliningIndicators/ExpandedBlockEnd.gif" align="top"/>　　}    <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　</script>    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进 入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！    <img src="/Images/OutliningIndicators/None.gif" align="top"/> <img src="/Images/OutliningIndicators/None.gif" align="top"/>　　写到这里弹出窗口的制作和应用技巧基本上算是完成了!  <img src="/Images/OutliningIndicators/None.gif" align="top"/></div></div>">

标签：