js模态对话框showModalDialog与非模态对话框showModelessDialog

来源：互联网发布：下歌不要钱的软件编辑：程序博客网时间：2024/06/07 04:02

在js中要用到弹出框是很常见的事，一般我们只是弹出个警告，提示，用alert就可以了；

如果涉及到输入值，可能要用到confirm，prompt。

但是这还不够，如果弹出的页面需要是一个定制的页面，即弹出y一个html，那怎么办呢？

一般，大家很快想到window.open，是吧？

但是这个函数有个问题，我想让弹出的页面是一个新的窗口，悬浮在原先的页面上。

这个函数是做不到的，现在的浏览器很多页面时想选项卡一样打开的，用这个函数打开的页面会和其他

选项卡并列打开，而并不是你想要的打开一个新的浏览器窗口。

有人说，只要设置浏览器打开页面方式不要在tab选项卡打开就可以了，这也是一个办法，

但是你怎么跟客户解释呢？

貌似实现哪种想要的效果只能换另一种方式了，就是弹出层。

弹出层的原理很简单，就是事先在页面写一个隐藏的div，当弹出时，让它显示即可。

至于让它悬浮在页面上，很容易做到，控制css就可以了。

很多这样的js框架也是这个原理，比如jquery-ui。

你甚至不用自己写代码，到网上找找就能找到很漂亮可用的弹出层代码。

貌似这是最完美的解决办法了，其实这样的代码是有问题的。

这样的弹出层是基于一个页面的，因为你先写好的隐藏div就放在某个页面，

当这个页面又被放到其他frame中去的时候，那弹出的div其实还在原先的页面，而没有悬浮在

frame的外面，效果就是你看到的弹出框悬浮在嵌入的frame里面，这样你就必须保证弹出的div大小不能超过

frame的大小，不然就卡在里面了，而且即使div大小没有超过frame，div的移动范围也没法移出frame边框。

这样的效果可以说就是一个大bug！页面的bug是很严重的，因为客户直接可以看到。

所以这种方式是有局限性的，除非你的页面没有用到frame，这个页面就是一个html。

或者你的某个页面足够大，不用考虑会被卡在里面。

现在我想说另外一种办法，就是ie有模态对话框showModalDialog与非模态对话框showModelessDialog

（注：方法与jquery无关，弹出的子页面有用到了jquery的方法，所以就引入了jquery，你完全可以不引入）

父页面：

dialog.html

<html><head><meta charset="UTF-8"><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript"> $(document).ready(function(){});function openwin() { window.open ("slideToggle2.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");}function openwin2() { window.showModalDialog("slideToggle2.html");}function openwin3() { window.showModelessDialog("slideToggle2.html");}function openwin4() {   window.showModalDialog("slideToggle.html","param4");}function openwin5() {   var arr=new Array('p51','p52','p53');    window.showModelessDialog("slideToggle.html",arr);}function openwin6() {  window.showModalDialog("slideToggle.html","param4",         "dialogHeight:500px;dialogWidth:500px;dialogLeft:50px;dialogTop:50px;status:no;resizable:yes;scroll:no;");}function openwin7() {   var arr=new Array('p71','p72','p73');    window.showModelessDialog("slideToggle.html",arr,"dialogHeight:500px;dialogWidth:500px;center:yes;status:yes;resizable:no;scroll:yes;");}function openwin8() { // showModelessDialog  showModalDialog var parentParam=document.getElementById("parentParam").value; var returnValue8=window.showModalDialog("slideToggle.html",parentParam,         "dialogHeight:500px;dialogWidth:500px;dialogLeft:50px;dialogTop:50px;status:no;resizable:yes;scroll:no;");//显示参数document.getElementById("parentttt").innerText="第8个按钮弹出的对话框返回参数是：\n"+returnValue8;}var dialog9=null;function openwin9() {  // var parentParam=document.getElementById("parentParam").value;    dialog9=window.showModelessDialog("modelless.html",window,"dialogHeight:500px;dialogWidth:500px;center:yes;status:yes;resizable:no;scroll:yes;");}function showReturnValue9(){    var d9=dialog9.document.getElementById("fanhui").value;  document.getElementById("parentttt").innerText="第9个按钮弹出的对话框返回参数是：\n"+d9;}function  cleartt(){   document.getElementById("parentttt").innerText="";}</script> </head> <body> <input  type="button" value="1window.open" onclick="openwin()" /><br> <br>2,3<br><input  type="button" value="2window.showModalDialog" onclick="openwin2()" /><br> <input  type="button" value="3window.showModelessDialog" onclick="openwin3()" /><br> <br>-----------------------------------------------------------------------------------------------------------------<br>带参数的例子4,5<br><input  type="button" value="4window.showModalDialog带参数" onclick="openwin4()" /><br> <input  type="button" value="5window.showModelessDialog带参数" onclick="openwin5()" /><br> <br><br>控制外观的例子6,7<br><input  type="button" value="6window.showModalDialog带外观参数" onclick="openwin6()" /><br> <input  type="button" value="7window.showModelessDialog带外观参数" onclick="openwin7()" /><br> <br><hr><font color="gray">下面是完整的父子传值例子</font><br>父子页面互相传值的例子8,9<br>请输入参数值：<input  type="text" id="parentParam" value=""  /><br> <input  type="button" value="8window.showModalDialog父子页面互相" onclick="openwin8()" /><br> <font color="blue">第8个对话框是模态对话框，它的返回值是打开的对话框返回的值。<br>即window.returnValue，可以直接获得。<br><br></font><input  type="button" value="9window.showModelessDialog父子页面互相" onclick="openwin9()" /><br><font color="red">第9个对话框因为是非模态对话框，它的返回值是打开的对话框对象。<br>和模态对话框不一样，模态对话框的返回值是对话框页面的用户<br>输入的返回值，因为是模态的，可以等待用户输入；<br>而非模态是不一样的，它的传值方法不能像模态的一样直接得到返回参数<br>它有另外的传值方式，我们可以把父窗口的window对象传过去，这样，<br>我们在非模态对话框就可以操作父页面了，你想传的值看起来是传过去的,<br>实际上是直接取的。如果要返回值给父窗口，也是直接赋给父页面的某个元素,<br>看起来是传过去的,实际上是直接赋给的。<br></font><br> <hr><br> 下面显示接收dialog的返回参数：<input  type="button" value="清除" onclick="cleartt()" /><br><textarea cols="50" rows="5" id="parentttt"></textarea>  <br> <br> </body></html><script type="text/javascript"> </script>

子页面1

slideToggle.html

<html><head><base target="_self" /><meta charset="UTF-8"><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript"> $(document).ready(function(){$(".flip").click(function(){    $(".panel").slideToggle(3000,'linear',function(){   //alert("hh");});  });});</script> <style type="text/css"> div.panel{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}p.flip{margin:0px;padding:5px;text-align:center;background:#e5ffcc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head> <body><a href="http://www.baidu.com/"  >百度</a><br> <p class="flip">请点击这里</p><div class="panel"><p>slideDown , slideUp, slideToggle ,animate 可以实现类似的效果</p><p>控制好方向，速度用不同的方法可实现相同效果。</p></div><br><br> 下面显示从父页面接收的参数：<br><textarea cols="50" rows="5" id="ttt"></textarea>  <br> <br>  <input  type="button" value="关闭此对话框" onclick="closeDialog()" /><br>  <br> 请输入值，此值返回给父页面 <br> <input  type="text" id="fanhui" value=""  /><br> <input  type="button" value="向打开此对话框的父页面传值并关闭" onclick="reback()" /><br> </body></html><script type="text/javascript">   var a = window.dialogArguments;  document.getElementById("ttt").innerText=a;function closeDialog(){  window.close();}function reback(){  var fanhui=document.getElementById("fanhui").value;  if(fanhui==null||fanhui==''){    var arr=new Array("dialog_param_1","dialog_param_2,dialog_param_3");    window.returnValue = "haha";  }else{    window.returnValue = fanhui;  }     window.close();}</script>

子页面2

slideToggle2.html

<html><head><base target="_self" /><meta charset="UTF-8"><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript"> $(document).ready(function(){$(".flip").click(function(){    $(".panel").slideToggle(3000,'linear',function(){   //alert("hh");});  });});</script> <style type="text/css"> div.panel{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}p.flip{margin:0px;padding:5px;text-align:center;background:#e5ffcc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head> <body><a href="http://www.baidu.com/"  >百度</a><br> <p class="flip">请点击这里</p><div class="panel"><p>slideDown , slideUp, slideToggle ,animate 可以实现类似的效果</p><p>控制好方向，速度用不同的方法可实现相同效果。</p></div></body></html><script type="text/javascript"> </script>

子页面3

modelless.html

<html><head><base target="_self" /><meta charset="UTF-8"><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript"> $(document).ready(function(){$(".flip").click(function(){    $(".panel").slideToggle(3000,'linear',function(){   //alert("hh");});  });});</script> <style type="text/css"> div.panel{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}p.flip{margin:0px;padding:5px;text-align:center;background:#e5ffcc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head> <body><a href="http://www.baidu.com/"  >百度</a><br> <p class="flip">请点击这里</p><div class="panel"><p>slideDown , slideUp, slideToggle ,animate 可以实现类似的效果</p><p>控制好方向，速度用不同的方法可实现相同效果。</p></div><br><br> 下面显示从父页面接收的参数：<br><textarea cols="50" rows="5" id="ttt"></textarea>  <br> <br>  <input  type="button" value="关闭此对话框" onclick="closeDialog()" /><br>  <br> 请输入值，此值返回给父页面 <br> <input  type="text" id="fanhui" value=""  /><br> <input  type="button" value="向打开此对话框的父页面传值并关闭" onclick="reback()" /><br> </body></html><script type="text/javascript">   //非模态对话框接受参数  var parentWindow = window.dialogArguments;  var a2=parentWindow.document.getElementById("parentParam").value;  document.getElementById("ttt").innerText=a2;function closeDialog(){  window.close();}function reback(){//非模态对话框返回给父窗口参数//显示参数var fanhui=document.getElementById("fanhui").value;parentWindow.document.getElementById("parentttt").innerText="第9个按钮弹出的对话框返回参数是：\n"+fanhui;   window.close();}</script>

此方法只适用于ie