专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

统制非模态弹出框(showModelessDialog)唯一且随父页面关闭

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
控制非模态弹出框(showModelessDialog)唯一且随父页面关闭

网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两种,如下:

模态:window.showModalDialog()

非模态:window.showModelessDialog()

另外还有window.open 方法,以及通过div来模拟弹出框效果的形式。

window.open请自行百度,了解不深;div模拟的方式不适用与,弹出框中某些组件与父页面组件不相容的情况,如笔者所在项目,父页面中的jquery与整个网站js框架不相容(当然不是简单的可以通过替换$关键字来解决)。所以笔者选择了window.showModelessDialog()方法。但是使用该方法,会遇到可以打开多个弹出框以及父页面关闭后不同步关闭的问题。解决该问题的关键是,知道window.showModelessDialog()方法会返回打开的页面对象,只需要缓存这个页面对象,再次打开时判定该对象的状态就行。

代码如下:

1 if(!modelessDialog|| modelessDialog.closed){ 2 modelessDialog = window.showModelessDialog(

这样就能防止打开多个弹出框。

而实现子页面随父页面同步关闭功能,只需要在父页面的onUnload中关闭该子页面就行。

代码如下:

 1 //父页面: 2 <body  onUnload="modelessDialog_Close();"> 3  4 //父页面关闭时同时关闭右击查找画面 5 function modelessDialog_Close(){ 6     if(modelessDialog&&!modelessDialog.closed){ 7         modelessDialog.close(); 8         modelessDialog = null; 9     }10 }

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: