JS中的弹出窗口

来源：互联网发布：运行java文件编辑：程序博客网时间：2024/06/04 18:38

js中弹出窗口，open和showModalDialog

直接上代码

1、open

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>弹窗示例</title></head><script language="javascript"><!--//打开模式窗口function open1(){  //设置模式窗口的一些状态值  var windowStatus = "dialogWidth:460px;dialogHeight:380px;center:1;status:0;";  //在模式窗口中打开的页面  var url = "test.html";  //将模式窗口返回的值临时保存  var temp = showModalDialog(url,"",windowStatus);  //将刚才保存的值赋给文本输入框returnValue  document.all.returnValue.value = temp;}//打开全屏窗口function open3(){  //设置窗口的一些状态值  var windowStatus = "fullscreen = 1";  //在窗口中打开的页面  var url = "test.html";      window.open(url,"noMenuWindowName",windowStatus);  }--></script><body><input type="button" name="btn1" value="打开窗口" onClick="open1()"><br>从窗口返回的值：<input type="text" id="returnValue" name="returnValue"></body></html>

弹出的窗口2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript">function setV(){//把值返回给父窗口window.opener.document.all.ff.value="usr";window.close();}  </script> </head> <body>  <input type="button" onclick="setV();" value="保存"/> </body></html>

2、showModalDialog

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>window示例</title></head><script language="javascript"><!--//打开模式窗口function open1(){  //设置模式窗口的一些状态值  var windowStatus = "dialogWidth:460px;dialogHeight:380px;center:1;status:0;";  //在模式窗口中打开的页面  var url = "test.html";  //将模式窗口返回的值临时保存  var temp = showModalDialog(url,"",windowStatus);  //将刚才保存的值赋给文本输入框returnValue  document.all.returnValue.value = temp;}//打开全屏窗口function open3(){  //设置窗口的一些状态值  var windowStatus = "fullscreen = 1";  //在窗口中打开的页面  var url = "test.html";      window.open(url,"noMenuWindowName",windowStatus);  }--></script><body><input type="button" name="btn1" value="打开窗口" onClick="open1()"><br>从窗口返回的值：<input type="text" id="returnValue" name="returnValue"></body></html>

2.html

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>在模式窗口中打开的页面</title></head><script language="javascript"><!--//将选中的值先保存到隐含对象上function ok(tempValue){  document.all.selectedValue.value = tempValue;  window.close();}//关闭页面时将隐含对象中的值传回function willReturnValue(){  window.returnValue = document.all.selectedValue.value; // window.close();}--></script><body onUnload="willReturnValue()" bgcolor="#D4D0C8"><center>  请单选您的爱好：  <br>  <br>  <input type="radio" name="lover" value="体育运动" onClick="ok(this.value)">体育运动  <br>  <input type="radio" name="lover" value="休闲娱乐" onClick="ok(this.value)">休闲娱乐  <br>  <input type="radio" name="lover" value="看书读报" onClick="ok(this.value)">看书读报  <br>  <input type="radio" name="lover" value="琴棋书画" onClick="ok(this.value)">琴棋书画  <input type="hidden" id="selectedValue" name="selectedValue"></center></body></html>

可以看到二者的区别：

1、showModalDialog和open一样也是3个参数，showModalDialog(文件地址,window,窗口属性)，open(文件地址,window,窗口属性)。

2、二者都向父窗口中返回了值。open打开的窗口，有最大化最小化按钮，而showModalDialog则只有一个关闭的按钮。

3、open打开的新窗口可以鼠标可以点击父窗口的，showModalDialog只有把新打开的窗口关了鼠标的焦点才可触到父窗口