iframe 子ページの親ページを操作してページのポップアップ レイヤー効果をブロックする方法

今回は、iframeのサブページを操作して親ページのページポップアップレイヤー効果をブロックする方法を説明します。 iframeのサブページが親ページをブロックする操作をする場合の注意事項とは何ですか。ページのポップアップ レイヤー効果を次に示します。

質問:index.html では、iframe で Son.html が導入されています。son.html で操作をクリックしてページ全体をブロックし、表示するレイヤーをポップアップする方法は?
準備:index.htmlson.html
アイデア:
1: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结束 -->

2:index.htmlのボディ部分にシールドレイヤーとコンテンツ表示レイヤーを追加する

<!--弹出的登录页面层--> 
<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>

メソッドは習得できたと思いますこれらの事例を読んだ後は、さらに興味深い情報を入手してください。php 中国語 Web サイトの他の関連記事にも注目してください。

関連書籍:

HTML 標準の記述と Dreamweaver で生成されたコードの違いは何ですか?

HTML で hr 水平線を使用する方法

HTML でグラフィックとテキストを混在させる方法

iframe を使用して現在の Web ページに他の Web ページを埋め込む方法

以上がiframe 子ページの親ページを操作してページのポップアップ レイヤー効果をブロックする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。