今回は、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>
3つ目: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>
4つ目:son.html内の特定の操作で親ページのメソッドを呼び出す
<a href="javascript:void(0)" onclick="parent.window.showDiv()">查看</a>
メソッドは習得できたと思いますこれらの事例を読んだ後は、さらに興味深い情報を入手してください。php 中国語 Web サイトの他の関連記事にも注目してください。
関連書籍:
HTML 標準の記述と Dreamweaver で生成されたコードの違いは何ですか?
iframe を使用して現在の Web ページに他の Web ページを埋め込む方法
以上がiframe 子ページの親ページを操作してページのポップアップ レイヤー効果をブロックする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。