控制非模态弹出框(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()">弹出框< ...
随机推荐
- 框架Maven笔记系列 一 基础
主题:SpringMVC 学习资料参考网址: 1.http://www.icoolxue.com 2.http://maven.apache.org/ 1.Maven解决了什么问题? Maven基于项 ...
- 烦人的win10的输入法
这段时间在使用win10,被win10的输入法折腾的要死要死的... 通过度娘把它设置得跟win7使用习惯差不多了, (见:http://jingyan.baidu.com/article/b2c18 ...
- js快速排序方法
function quickSort(arr){ if(arr.length<=1){ return arr; } var arrIndex=Math.floor(arr.length/2); ...
- Slides - 在线制作效果精美的幻灯片（PPT）
Slides 是可以在浏览器中使用的在线幻灯片编辑器.与传统的演示软件,比如 PowerPoint 相比,Slides 不需要下载任何东西.你所有的信息都是安全地存储在我们的服务器上,无论你在哪里.不 ...
- 自动适应iframe右边的高度
在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度. 这时候找到了一个解决方法: <iframe name="my_iframe ...
- 7个你可能不认识的CSS单位
众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利.随着web继续不断地发展,对于新技术新解决方案的要求也会不断增长.因此,作为网页设计师和前端开发人员 ...
- 【经验之谈】前端面试知识点总结（HTML相关）——附答案
目录 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 2.HTML5的优点与缺点? 3.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 4.HTML5有哪些新 ...
- SQL增强之Merge
SQL Server 2008提供了一个增强的SQL命令Merge,用法参看MSDN:http://msdn.microsoft.com/zh-cn/library/bb510625.aspx 功能: ...
- sass高级语法
github地址:https://github.com/lily1010/sass/tree/master/course03 用到的sass语法是: sass --watch test.scss:te ...
- 移动端图片滚动加载-lazyload实现的要点总结
最近在做移动端的营销页面时,遇到了页面有大量图片的情况,于是很自然的想到了要使用图片lazyload,PC端用着jQuery,也有现成的插件.但是在移动端,基本不用jQuery,于是就试着自己去造一下 ...