网站开发中，常常会遇到需要弹出窗体的情况，一般弹出框有模态和非模态两种，如下：
模态：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 style="margin: 0 0 0 0; padding: 0 0 0 0; overflow: hidden;" onUnload="modelessDialog_Close();">
3
4 //父页面关闭时同时关闭右击查找画面
5 function modelessDialog_Close(){
6 if(modelessDialog&&!modelessDialog.closed){
7 modelessDialog.close();
8 modelessDialog = null;
9 }
10 }
时间： 2024-12-27 14:12:27