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

模态：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. struts2、jsp的简单路径的简单拦截

    <filter> <filter-name>UsersFilter</filter-name> <filter-class>com.web.UsersF ...

  2. Java并发编程：并发容器之ConcurrentHashMap（转载）

    Java并发编程:并发容器之ConcurrentHashMap(转载) 下面这部分内容转载自: http://www.haogongju.net/art/2350374 JDK5中添加了新的concu ...

  3. handlebars模板替换

    <html> <head> <meta charset="UTF-8" /> <!-- <script type="tex ...

  4. Guava学习笔记：简化异常处理的Throwables类

    有时候, 当我们我们捕获异常, 并且像把这个异常传递到下一个try/catch块中.Guava提供了一个异常处理工具类, 可以简单地捕获和重新抛出多个异常.例如: import java.io.IOE ...

  5. bootstrap的下拉框在firefox界面不友好的处理

    http://output.jsbin.com/titaki 以上这个链接在firefix浏览器打开就会发现里面有个小容器,而且下拉按钮样式跟不友好 上谷歌查了一下 1.小容器可以利用select:p ...

  6. [deviceone开发]-毛玻璃效果示例

    一.简介 do_Bitmap组件可以把图片加载为内存里的Bitmap对象,能够对这个对象做各种图形化处理.目前只有3种处理,圆角,毛玻璃,灰度.以后会添加更多. 二.效果图 三.相关下载 https: ...

  7. 自定义Sublime Text图标详细教程

    改造后的Sublime 先看看我改造后的神器图标,接下来你就知道下面是干什么的了 :               之前无意间在刘哇勇的博客上看到这么一篇文章,很好奇就尝试着更改Sublime Text ...

  8. github上比较全的知识

    https://github.com/hawx1993/github-FE-project

  9. JavaScript学习笔记3之 数组 & arguments（参数对象）& 数字和字符串转换 & innerText/innerHTML & 鼠标事件

    一.Array数组 1.数组初始化(Array属于对象类型) /*关于数组的初始化*/ //1.创建 Array 对象--方法1: var arr1=[]; arr1[0]='aa';//给数组元素赋 ...

  10. JavaScript学习笔记2之Tab切换

    1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...