zoukankan      html  css  js  c++  java
  • 控制非模态弹出框(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 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 }
  • 相关阅读:
    Linux系统 Docker RabbitMQ容器集群部署
    Linux系统 SSH免密登入
    ubuntu server 乱码
    简单总结在github上托管工程
    在线编译系统之nodejs执行shell
    Ubuntu中软件安装与卸载
    ubuntu软件安装
    “cannot find module ‘npmlog’….”的错误
    关于事件的一点小总结
    mongodb基本操作
  • 原文地址:https://www.cnblogs.com/jkgyu/p/5070620.html
Copyright © 2011-2022 走看看