主頁(yè) > 知識(shí)庫(kù) > iframe子頁(yè)面操作父頁(yè)面并實(shí)現(xiàn)屏蔽頁(yè)面彈出層效果

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

熱門(mén)標(biāo)簽:浦東新區(qū)百度地圖標(biāo)注圖片 鄒城智能外呼系統(tǒng) 個(gè)貸電銷(xiāo)機(jī)器人 經(jīng)綸電銷(xiāo)機(jī)器人 外呼智能系統(tǒng)報(bào)價(jià) 電話(huà)機(jī)器人宣傳片 華為收費(fèi)站地圖標(biāo)注 巫山縣地圖標(biāo)注app 騰訊植物園地圖標(biāo)注
問(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 ,

復(fù)制代碼
代碼如下:

<!-- 右側(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)容展示層

復(fù)制代碼
代碼如下:

<!--彈出的登錄頁(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)閉層的方法

復(fù)制代碼
代碼如下:

<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ū)?
//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è)面方法

復(fù)制代碼
代碼如下:

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

標(biāo)簽:楊凌 三沙 唐山 廣西 南平 日喀則 那曲 滁州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《iframe子頁(yè)面操作父頁(yè)面并實(shí)現(xiàn)屏蔽頁(yè)面彈出層效果》,本文關(guān)鍵詞  iframe,子,頁(yè)面,操作,父,并,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《iframe子頁(yè)面操作父頁(yè)面并實(shí)現(xiàn)屏蔽頁(yè)面彈出層效果》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于iframe子頁(yè)面操作父頁(yè)面并實(shí)現(xiàn)屏蔽頁(yè)面彈出層效果的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章