iframe子页面操作父页面并实现屏蔽页面弹出层效果
导读：收集整理的这篇文章主要介绍了iframe子页面操作父页面并实现屏蔽页面弹出层效果，觉得挺不错的，现在分享给大家，也给大家做个参考。 问题：在index.htML 中，iframe 引入son.html，在son.html 中如何点...
收集整理的这篇文章主要介绍了iframe子页面操作父页面并实现屏蔽页面弹出层效果，觉得挺不错的，现在分享给大家，也给大家做个参考。 问题：在index.htML 中，iframe 引入son.html，在son.html 中如何点击某个操作，实现屏蔽整个页面，并弹出要显示的层？ 准备： index.html son.html
思路：
一：index.html中iframe引入son.html ，
复制代码代码如下:
!-- 右侧iframe开始 -->
div id="resDiv" class="resDiv">
iframe name="res" class="iframestyle" allowtransparency="true" src="son.html" frameborder="0" scrolling="no"> /iframe>
/div>
!-- 右侧iframe结束 -->
二： index.html的body部分中添加屏蔽层和内容展示层
复制代码代码如下:
!--弹出的登录页面层-->
div id="maplayer" style="display: none; " >
input tyPE="button" value="关闭" onclick="cloSEMap()" />
/div>
!--屏蔽层，用来透明的屏蔽整个页面-->
div id="mapBgLayer" style="posITion:absolute; display: none; "> /div>
三：index.html 中设置div的样式和实现打开关闭层的方法
复制代码代码如下:
style type="text/css">
#BgLayer {
background: #939393 none repeat scroll 0 0;
height:100%;
width:100%;
left:0;
top:0;
filter: alpha(opacity=80); /* IE */
-moz-opacity: 0.8; /* Moz + FF */
z-index: 10000;
}
#Layer {
width: 400px;
height: 400px;
margin: -180px 0 0 -170px;
left: 50%;
top: 50%;
position: absolute;
background: #FFF;
z-index: 10001;
border: 1px solid #1B5BAC;
}
/style>
script type="text/javascript">
/*显示页面*/
function showDiv) {
VAR bg = document.getElementById("BgLayer");
var con = document.getElementById("Layer");
//var w = document.documentElement.clientWidth; //网页可见区域宽
//var h = document.documentElement.clientHeight; //网页可见区域高
var w = document.body.scrollWidth; //网页正文全文宽
var h = document.body.scrollHeight; //网页正文全文高
// alert(w+"-"+h);
bg.style.display = "";
bg.style.width = w + "px";
bg.style.height = h + "px";
con.style.display = "";
}
/*关闭*/
function closeDiv() {
var bg = document.getElementById("BgLayer");
var con = document.getElementById("Layer");
bg.style.display = "none";
con.style.display = "none";
}
/script>
四：son.html 中某个操作调用父页面方法
复制代码代码如下:
a href="javascript:void(0)" onclick="parent.window.showDiv()"> 查看/a>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： iframe子页面操作父页面并实现屏蔽页面弹出层效果
本文地址： https://pptw.com/jishu/588114.html