window.open方式模拟confirm弹出三个按钮对话框

(经测试,还有个bug 在狂点父窗口之后,或者点住父窗口移动鼠标,子窗口会自动最小化到任务栏!!请原创作者或者读者看到,可以给点建议)

 

在Web软件开发过程中,经常会需要弹出一个窗口,并且在子窗口和父窗口之间通信,并且子窗口要能锁住父窗口。比较常见的是window.showModalDialog(),这种方法有很多局限性,比如窗口之间的通信不方便,只在ie下有效等。如果采用window.open()的方式,子窗口又不能锁住父窗口。网上有许多通过层来屏蔽父窗口的例子,但是也都没能完全锁定父窗口。经过考虑,楼主我决定采用一种变通的办法:锁定父窗口-> 阻止父窗口获得焦点->当父窗口获得焦点时,将焦点转移到子窗口。

代码如下:

父窗口网页parent.html:

Html代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="javascript"> window.onfocus = function focus(){//重写父窗口window对象中的onfocus,使其在获得焦点时执行以下代码 if( typeof(window.childWindow)!="undefined"){//如果子窗口存在,将焦点转到子窗口 window.childWindow.focus(); } } function showChild(){ //打开一个子窗口,并将子窗口的引用保存在父窗口window的childWindow属性中 var height=30; var width=220; var left, top; left = (window.screen.availWidth - width) / 2; //使得对话框处于屏幕的正中间 top = (window.screen.availHeight - height) / 2; var pos = 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',screenX=' + left + ',screenY=' + top; window.childWindow = window.open ("child.html", "newwindow",pos,"toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"); } </script> </head> <body> <input name="btn_show" type="button" value="显示子窗口" onclick="showChild()" /> <input name="btn_alert" type="button" value="显示其他" onclick="alert('被调用了')" /> </body> </html>

 

   

子窗口网页 child.html:

 

<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <mce:script type="text/javascript"><!-- function saveChange(){ //alert(window.opener.top.downFrame.mainFrame.listFrame); window.opener.top.downFrame.mainFrame.listFrame.doPageChange(); window.close(); } function change(){ window.opener.top.downFrame.mainFrame.listFrame.changeNotSave(); window.close(); } window.onunload = function unload(){ window.opener.childWindow = undefined; //如果少了这一句,在子窗口点击关闭,或者点击自定义的关闭button,会报js异常;并且不能写成“undefined” } // --></mce:script> </head> <body oncontextmenu="return false"> <table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> <tr> <td align="center" bgcolor="#CCCCCC"><span class="STYLE1">操作提示</span></td> </tr> <tr> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><input type="button" name="Submit" value="OK" onclick="saveChange()"/> <input type="button" name="Submit" value="破棄" onclick="change()"/> <input type="button" name="Submit2" value="キャンセル" onclick="window.close()"/></td> </tr> </table> </body> </html>

你可能感兴趣的:(JavaScript,html,function,input,button,border)