控制非模态弹出框(showModelessDialog)唯一且随父页面关闭
网站开发中，常常会遇到需要弹出窗体的情况，一般弹出框有模态和非模态两种，如下：
模态：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)唯一且随父页面关闭的更多相关文章
- jeecg 弹出框 点击按钮回调父页面 返回值
jeecg 弹出框 点击按钮回调父页面 返回值 <t:base type="jquery"></t:base> <t:base type=" ...
- Bootstrap模态弹出框
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
- UIPresentationController - iOS自定义模态弹出框
参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...
- 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-4 模态弹出框--结构分析
模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...
- 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-3 模态弹出框
模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
- bootstrap中的modal 模态弹出框不能放在 form_for里面，一弹出modal会自动submit掉form
bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
- 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-2 动画过渡
动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...
- 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果
模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...
随机推荐
- Gym 101102C---Bored Judge（区间最大值）
题目链接 http://codeforces.com/gym/101102/problem/C problem description Judge Bahosain was bored at ACM ...
- [python拾遗]文件操作
文件操作 1.open()函数 open()函数主要用于文件处理,一般分为下面3个过程: 1.打开文件 2.操作文件 3.关闭文件 常见的格式示例: f = open('note.txt','r') ...
- JProfiler 8下载地址和注册码
JProfiler---- 一个很好的java性能监控工具,现在附上下载地址和注册码,此破解版仅供学习交流使用, 其他用途请购买正版授权!!!windows x64 zip下载地址:http://do ...
- windows根据端口号找进程
d:\>netstat -ano | findstr "7777" TCP 127.0.0.1:7776 127.0.0.1:7777 ESTABLISHED 11764 T ...
- mysq基础一（字段类型）
本文转自 “旋木的技术博客” 博客,http://mrxiong.blog.51cto.com/287318/1651098 一.数值类型 Mysql支持所有标准SQL中的数值类型,其中包括严格数据类 ...
- synchronized的实现原理-java并发编程的艺术读书笔记
1.synchronized实现同步的基础 Java中的每个对象都是可以作为锁,具体有3种表现. 1.对于普通同步方法,锁是当前实例对象. 2.对于静态同步方法,锁是当前类的Class对象. 3.对于 ...
- JS中数组去除重复
法一:返回新数组每个位子类型没变 function outRepeat(a){ var hash=[],arr=[]; for (var i = 0; i < a.length; i++) { ...
- Web安全之点击劫持（ClickJacking）
点击劫持(ClickJacking)是一种视觉上的欺骗手段.大概有两种方式,一是攻击者使用一个透明的iframe,覆盖在一个网页上,然后诱使用户在该页面上进行操作,此时用户将在不知情的情况下点击透明的 ...
- 记STM32F030多通道ADC DMA读取乱序问题
问题描述通过 uint16_t ConvData[8]保存DMA搬运的ADC转换数值,但是这个数组数值的顺序总是和ADC不是顺序对应的.比如用7个通道的ADC,当设置ADC_InitStructure ...
- 在Kali Linux下安装与配置OpenVas
以下是我的Kali版本号: 执行安装命令: apt-get install openvas 安装完成后可以在漏洞分析菜单下查看到OpenVas相关选项. 以下为安装完成后需要用到的几个命令: open ...