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

模态：window.showModalDialog()

非模态：window.showModelessDialog()

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

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

代码如下：

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

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

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

代码如下：

 //父页面：

 <body style="margin: 0 0 0 0; padding: 0 0 0 0; overflow: hidden;" onUnload="modelessDialog_Close();">

 //父页面关闭时同时关闭右击查找画面

 function modelessDialog_Close(){

     if(modelessDialog&&!modelessDialog.closed){

         modelessDialog.close();

         modelessDialog = null;

     }

 }

控制非模态弹出框(showModelessDialog)唯一且随父页面关闭的更多相关文章

  1. jeecg 弹出框 点击按钮回调父页面 返回值

    jeecg 弹出框 点击按钮回调父页面 返回值 <t:base type="jquery"></t:base> <t:base type=" ...

  2. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  3. UIPresentationController - iOS自定义模态弹出框

    参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...

  4. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  5. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

  6. bootstrap中的modal 模态弹出框不能放在 form_for里面，一弹出modal会自动submit掉form

    bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form

  7. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  8. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  9. html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果

    模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...

随机推荐

  1. MySQL: Tree-Hierarchical query

             http://dba.stackexchange.com/questions/30021/mysql-tree-hierarchical-query     No problem. ...

  2. PHP的PSR系列规范都有啥内容

    PSR 是PHP Standard Recommendation的简写,它其实应该叫PSRs,即系列推荐标准:目前通过的规范有PSR-0(Autoloading Standard).PSR-1(Bas ...

  3. static关键字详解

    首先,要了解一下这些东西的存放位置 堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的目的是得到操作指令) 2.jvm只有一个堆区(heap)被所有线程共享,堆 ...

  4. android自动化之monkeyrunner

    一.使用CMD命令打开模拟器 运行monkeyrunner之前必须先运行相应的模拟器或连上设备,不然monkeyrunner无法连接设备. 1.1  用Elipse打开Android模拟器或在CMD中 ...

  5. GJM：用C#实现网络爬虫（一） [转载]

    网络爬虫在信息检索与处理中有很大的作用,是收集网络信息的重要工具. 接下来就介绍一下爬虫的简单实现. 爬虫的工作流程如下 爬虫自指定的URL地址开始下载网络资源,直到该地址和所有子地址的指定资源都下载 ...

  6. css笔记图

    1.css3选择器 2.css3动画 3.flex 4.自适应 5.边距图

  7. java类 对象 和构造方法

    github地址:https://github.com/lily1010/java_learn/tree/master/dog java中对象和类 java中万物皆对象,比如说动物,里面有猫,狗,鱼等 ...

  8. clang编译mysql（Ubuntu10 64位)

    编译安装mysql(Ubuntu10 64位) http://www.cnblogs.com/2018/p/3482259.html 这个介绍了gcc形式编译安装mysql 那我们使用clang进行编 ...

  9. Httplistener Access Denied

    HttpListener.Start() 会出现HttpListenerException, 显示拒绝访问 一般是因为有些计算机账户是没有权限创建 HttpListener服务, 但是可以注册一些规则 ...

  10. Android Contextual Menus之二：contextual action mode

    Android Contextual Menus之二:contextual action mode 接上文:Android Contextual Menus之一:floating context me ...