php父窗口弹出子窗口,iframe的子页面怎样操作父页屏蔽页面弹出层效果

这次给大家带来iframe的子页面怎样操作父页屏蔽页面弹出层效果，iframe的子页面操作父页屏蔽页面弹出层效果的注意事项有哪些，下面就是实战案例，一起来看一下。

问题：在index.html 中，iframe 引入son.html，在son.html 中如何点击某个操作，实现屏蔽整个页面，并弹出要显示的层？

准备： index.html son.html

思路：

一：index.html中iframe引入son.html ，

二： index.html的body部分中添加屏蔽层和内容展示层

三：index.html 中设置div的样式和实现打开关闭层的方法

#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;

}

/*显示页面*/

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";

}

四：son.html 中某个操作调用父页面方法查看

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：