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

模态：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. [函数] Unicode 检查字符串是否含中文字

    // 字串含中文 by Aone function IsIncludeChinese(Str: String): Boolean; var i: Integer; UCS4Str: UCS4Strin ...

  2. Oracle中的数据分页

    --数据分页脚本 --创建包含数据分页代码元素声明的包头结构create or replace package data_controlis type type_cursor_data is ref ...

  3. 用java实现新浪爬虫,代码完整剖析(仅针对当前SinaSignOn有效)

    先来看我们的web.xml文件,如下 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application ...

  4. 泛函编程（29）－泛函实用结构：Trampoline-不再怕StackOverflow

    泛函编程方式其中一个特点就是普遍地使用递归算法,而且有些地方还无法避免使用递归算法.比如说flatMap就是一种推进式的递归算法,没了它就无法使用for-comprehension,那么泛函编程也就无 ...

  5. HTTP协议简解

    1.什么是http协议 http协议: 浏览器客户端 与  服务器端 之间数据传输的规范 2.查看http协议的工具 1)使用火狐的firebug插件(右键->查看元素->网络) 2)使用 ...

  6. Java.io.DataInputStream.readInt()

    1. 代码 import java.io.DataInputStream; import java.io.IOException; public class Test { public static ...

  7. Jquery UI 和Easy UI常用插件

    一.Jquery的插件简介 (一)什么是插件 插件(Plug-in)是一种遵循一定的应用程序接口规范编写出来的程序,是原有系统平台或应用软件平台功能的一种扩展和补充. 注意!!其只能在程序规定的系统平 ...

  8. 解决Wireshark没有网卡问题

    wireshark在mac上使用没有网卡问题直接在终端输入命令:sudo chmod 644 /dev/bpf*

  9. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  10. 【再探backbone 01】模型-Model

    前言 点保存时候不注意发出来了,有需要的朋友将就看吧,还在更新...... 几个月前学习了一下backbone,这段时间也用了下,感觉之前对backbone的学习很是基础,前几天有个园友问我如何将路由 ...