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

模态：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---ENCODE警告

    'ENCODE' is deprecated and will be removed in a future release. Please use AES_ENCRYPT instead ***** ...

  2. 怎样实现了捕获应用中的日志在android开发中

    怎样实现了捕获应用中的日志在android开发中,大家可研究一下. Process mLogcatProc = null; BufferedReader reader = null; try { mL ...

  3. GitHub for windows 使用方法

    1. ①http://windows.github.com/ 下载GitHub for Windows,大约660K,一个在线安装程序,如图: ②.运行GitHubSetup.exe,如下图,可能会下 ...

  4. Nginx学习随笔

    题外话 第一份工作中项目中有DBA和运维,所以平时也只关注开发部分,对数据库和服务器关注比较少,记得那时有用户反馈网站很慢,老大让我联系运维看看是不是服务器的问题,那时也不知道Nginx是个什么东西. ...

  5. CSS3背景温故

    1.背景的五种基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示方式)background-attachm ...

  6. css样式 --- CSS hack

    前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...

  7. iframe父页面获取子页面的高度

    最近做项目中用到了iframe,子页面更改父页面的高度,经过九九八十一难,找到了解决的办法. $(window).load(function() {  var h=$(document).height ...

  8. 浅析css布局模型1

    css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...

  9. 全信号高清DVI编码器|上海视涛科技

    高清DVI编码器(E700)简介 高清DVI编码器是上海视涛科技出品的高性能全信号DVI编码产品.该DVI编码器是上海视涛科技完全自主研发,并适用于DVI信号的编码采集及网络传输的专用硬件设备.可兼容 ...

  10. ftp安全设置

    1.文件介绍 /etc/pam.d/vsftpd中ftpuser.user_list文件说明:(在file=后添加改文件路径)/etc/vsftpd.conf中userlist_enable.user ...