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

模态：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. API 开发实践

    整个2015年,如果要给自己打上一个标签的话,那应该就是 API. 在各个不同的系统中定制各种 API 框架. 在做商城对接各种电商 ERP 的 API 开发中,我采用的是兼容SHOPEX 的 API ...

  2. 下载https协议需要的cer证书

    一:https简介 HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全 ...

  3. Oracle 数据库基础学习 (六) 子查询

    子查询在一个select中出现多个嵌套查询语句 1.在where子句中使用子查询(一般返回"单行单列" "单行多列" "多行单列"(可以提供 ...

  4. Java基础复习笔记系列 二

    1.Java中Static的相关用法总结?(静态方法:静态变量:静态代码块) public static void main(String args[])执行的关键,在于有static.有了stati ...

  5. Hibernate原生SQL查询

    最近在做一个较为复杂的查询,hibernate基本的查询不能满足,只好使用其提供的原生sql查询.参考网上的一些资料,做一些总结. 对原生SQL查询执行的控制是通过SQLQuery接口进行的,通过执行 ...

  6. Vue从零开始（一）

    一.什么是Vue? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层 ...

  7. Spring Security

    ntercept-url中access配置 IS_AUTHENTICATED_ANONYMOUSLY 允许匿名用户进入 IS_AUTHENTICATED_FULLY 允许登录用户进入 IS_AUTHE ...

  8. 高性能 Windows Socket 组件 HP-Socket v2.3.1-beta-1 发布

    HP-Socket 是一套通用的高性能 Windows Socket 组件包,包含服务端组件(IOCP 模型)和客户端组件(Event Select 模型),广泛适用于 Windows 平台的 TCP ...

  9. iOS安全笔记

    这一篇文章, 加上里面链接的几篇文章(一个百度的, 两个阮一峰的), 全看完应该了解得差不多了 如何打造一个安全的App?这是每一个移动开发者必须面对的问题.在移动App开发领域,开发工程师对于安全方 ...

  10. 12款支持移动设备的响应式 WordPress 主题

    响应式和现代设计风格的多用途 WordPress 主题与能够非常灵活的适应所有设备.而高级主题能够更大可能性的轻松定制.所有的主题是完全响应式的,您可以从主题选项中启用响应模式. 今天,这个列表收集了 ...