iframe中弹出框后添加覆盖整个页面的遮罩层并且不覆盖子页面中的弹出框
来源:互联网 发布:少儿编程课程 编辑:程序博客网 时间:2024/05/21 17:57
这个是我最近几天遇到的一个问题,确实令我抓狂了一阵。。。。
接下来讲一讲解决方法:
1.首先得要弹出覆盖整个页面的遮罩层,由于iframe是body的一个子元素部分,所以可以将弹出层代码写到父页面中,然后在子页面拿到父页面的对象,打开父页面的遮罩
2.打开遮罩层后我遇到了问题(iframe中的弹出框也被遮罩层给覆盖了),显然这不是我想要的结果,在佳哥我都要吐血的时候突然发现原来只是我太蠢。。。。
用z-index即可实现,接下来很显然就要必须给ifame所在设置position:absolute了,问题又来了。。。。
3.设置iframe的z-index在遮罩层之上后,理所应当我悲剧的发现整个iframe都上去了,但是我只想让弹出框上去。
4.最终我只能在iframe子页面上也设置了一个遮罩层,相当于,我点击按钮弹出子页面的弹出框,同时打开两个遮罩层,一个为父元素的遮罩,一个为iframe页面上的遮罩。
补上具体实现方法:
(1)父页面的遮罩
<span style="font-size:24px;"><!--遮罩层--><div id="mask" ></div><!-- 遮罩层结束 --></span>
(2)子页面中的遮罩(iframe)
<span style="font-size:24px;"><!--遮罩层--><div id="maskIframe" ></div><!-- 遮罩层结束 --></span>
当然,遮罩的初始样式是display:none;
(3)定义遮罩出现的函数globalShade() 与遮罩消失的函数deleteGlobalShade()
function globalShade(){//获取页面的高度和宽度if(window.parent.document.getElementById('mask')){window.parent.document.getElementById('mask').style.display="block";}if(document.getElementById("maskIframe")){document.getElementById("maskIframe").style.display="block";}};function deleteGlobalShade(){if(window.parent.document.getElementById('mask')){window.parent.document.getElementById('mask').style.display="none";}if(document.getElementById("maskIframe")){document.getElementById("maskIframe").style.display="none";}};$(function(){var sWidth=document.documentElement.clientWidth;var sHeight=document.documentElement.clientHeight;//获取页面的可视区域高度和宽度var wHeight=document.documentElement.clientHeight;var oMask=document.getElementById("mask");var oMaskIframe=document.getElementById("maskIframe");oMask.style.height=sHeight+"px";oMask.style.width=sWidth+"px";});
2 0
- iframe中弹出框后添加覆盖整个页面的遮罩层并且不覆盖子页面中的弹出框
- Bootstrap的模态框遮罩在iframe子页面弹出时不能覆盖父页面的解决方法
- 覆盖整个页面的div
- 让iframe子页面中的bootstrap模态框的背景覆盖到父页面
- 【iframe框,全局跳转】从iframe中跳转,覆盖整个页面
- Jsp页面提交form时,不弹出新的页面或是不覆盖旧的页面
- 解决遮罩层不能覆盖整个页面问题
- 用层覆盖整个页面
- jsp页面form提交时,不弹出新的页面也不覆盖旧的页面
- 弹出透明层,覆盖整个浏览器,页面元素的相对可视范围的不动
- 逻辑思路实现弹出框背景颜色覆盖整个页面小细节
- 添加一个页面覆盖
- 如何让div覆盖整个页面?
- Extjs 实现Iframe的子窗口遮罩整个页面
- layui中弹出一个弹框,通过内嵌页面里的操作关掉整个弹出层窗口
- iframe 高度自适应,并且子页面的高度不断变化
- 使用iframe框架时,子页面内跳转整个页面
- iframe子页面弹出框遮罩层问题的解决方法
- 多返回值函数
- Mybatis 配置数据库连接properites文件的问题
- Maven那点事儿
- spark源码编译后记
- Java 集合系列02之 Collection架构
- iframe中弹出框后添加覆盖整个页面的遮罩层并且不覆盖子页面中的弹出框
- Java的构造方法
- perl 跨行匹配;
- linux中pid,tid, 以及 真实pid的关系
- 中断一、外部中断
- pyinstaller使用
- 《零基础学习软件测试》之LoadRunner从入门到精通
- viser_1
- redis的安装与使用