問(wèn)題：在index.html 中，iframe 引入son.html，在son.html 中如何點(diǎn)擊某個(gè)操作，實(shí)現(xiàn)屏蔽整個(gè)頁(yè)面，并彈出要顯示的層？ 

準(zhǔn)備： index.html son.html 

思路： 

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

代碼如下:

<!-- 右側(cè)iframe開(kāi)始 --> 

<div id="resDiv" class="resDiv"> 

<iframe name="res" class="iframestyle" allowtransparency="true" src="son.html" frameborder="0" scrolling="no"></iframe> 

</div> 

<!-- 右側(cè)iframe結(jié)束 --> 

二： index.html的body部分中添加屏蔽層和內(nèi)容展示層 

代碼如下:

<!--彈出的登錄頁(yè)面層--> 

<div id="mapLayer" style="display: none; " > 

<input type="button" value="關(guān)閉" onclick="closeMap()" /> 

</div> 

<!--屏蔽層，用來(lái)透明的屏蔽整個(gè)頁(yè)面--> 

<div id="mapBgLayer" style="position:absolute; display: none;"></div> 

三：index.html 中設(shè)置div的樣式和實(shí)現(xiàn)打開(kāi)關(guān)閉層的方法 

代碼如下:

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

/*顯示頁(yè)面*/ 

function showDiv) { 

var bg = document.getElementById("BgLayer"); 

var con = document.getElementById("Layer"); 

//var w = document.documentElement.clientWidth; //網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?nbsp;

//var h = document.documentElement.clientHeight;//網(wǎng)頁(yè)可見(jiàn)區(qū)域高 

var w = document.body.scrollWidth; //網(wǎng)頁(yè)正文全文寬 

var h = document.body.scrollHeight; //網(wǎng)頁(yè)正文全文高 

// alert(w+"-"+h); 

bg.style.display = ""; 

bg.style.width = w + "px"; 

bg.style.height = h + "px"; 

con.style.display = ""; 

} 

/*關(guān)閉*/ 

function closeDiv() { 

var bg = document.getElementById("BgLayer"); 

var con = document.getElementById("Layer"); 

bg.style.display = "none"; 

con.style.display = "none"; 

} 

</script> 

四：son.html 中某個(gè)操作調(diào)用父頁(yè)面方法 

代碼如下:

<a href="javascript:void(0)" onclick="parent.window.showDiv()">查看</a>