iframe子頁面操作父頁面并實現(xiàn)屏蔽頁面彈出層效果

字號:


    問題:在index.html 中,iframe 引入son.html,在son.html 中如何點擊某個操作,實現(xiàn)屏蔽整個頁面,并彈出要顯示的層? 
    準備: index.html son.html 
    思路: 
    一:index.html中iframe引入son.html , 
    代碼如下:
    <!-- 右側(cè)iframe開始 --> 
    <div id="resDiv"> 
    <iframe name="res" allowtransparency="true" src="son.html" frameborder="0" scrolling="no"></iframe> 
    </div> 
    <!-- 右側(cè)iframe結(jié)束 --> 
    二: index.html的body部分中添加屏蔽層和內(nèi)容展示層 
    代碼如下:
    <!--彈出的登錄頁面層--> 
    <div id="mapLayer" > 
    <input type="button" value="關(guān)閉" onclick="closeMap()" /> 
    </div> 
    <!--屏蔽層,用來透明的屏蔽整個頁面--> 
    <div id="mapBgLayer"></div> 
    三:index.html 中設(shè)置div的樣式和實現(xiàn)打開關(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"> 
    /*顯示頁面*/ 
    function showDiv) { 
    var bg = document.getElementById("BgLayer"); 
    var con = document.getElementById("Layer"); 
    //var w = document.documentElement.clientWidth; //網(wǎng)頁可見區(qū)域?qū)?nbsp;
    //var h = document.documentElement.clientHeight;//網(wǎng)頁可見區(qū)域高 
    var w = document.body.scrollWidth; //網(wǎng)頁正文全文寬 
    var h = document.body.scrollHeight; //網(wǎng)頁正文全文高 
    // 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 中某個操作調(diào)用父頁面方法 
    代碼如下:
    <a href="javascript:void(0)" onclick="parent.window.showDiv()">查看</a>