js中弹出窗口,open和showModalDialog - 小众知识

js中弹出窗口,open和showModalDialog

2013年01月27日 14:18:05 苏内容
  标签: JS/弹出窗口
阅读:126

直接上代码
1、open
[html] view plaincopy
<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
 
[html] view plaincopy
<!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] view plaincopy
<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] view plaincopy
<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只有把新打开的窗口关了鼠标的焦点才可触到父窗口

扩展阅读