質問: index.html で、iframe が son.html を導入します。son.html で特定の操作をクリックしてページ全体をブロックし、表示するレイヤーをポップアップするにはどうすればよいですか? 準備: index.html son.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 スタイルを設定し、レイヤーを開いたり閉じたりする方法 コードをコピー コードは次のとおりです。<スタイル タイプ="text/css"> #背景レイヤー{ 背景: #939393 なし 繰り返しスクロール 0 0; 高さ:100%; 幅:100%; 左:0; トップ:0; フィルター: alpha(不透明度=80); /* IE */ -moz-opacity: 0.8; /* Moz + FF */ zインデックス: 10000; } #レイヤー{ 幅: 400ピクセル; 高さ: 400px; マージン: -180px 0 0 -170px; 左: 50%; 上位: 50%; 位置: 絶対; 背景: #FFF; zインデックス: 10001; 境界線: 1px 実線 #1B5BAC; } </スタイル> <script type="text/javascript"> /*ページを表示*/ 関数 showDiv) { var bg = document.getElementById("BgLayer"); var con = document.getElementById("レイヤー"); //var w = document.documentElement.clientWidth; //ウェブページの表示領域の幅 //var h = document.documentElement.clientHeight; //ウェブページの表示領域の高さ var w = document.body.scrollWidth; //ウェブページの全テキスト幅 var h = document.body.scrollHeight; //Webページの全テキストの高さ // アラート(w+"-"+h); bg.style.display = ""; bg.style.width = w + "px"; bg.style.height = h + "px"; con.style.display = ""; } /*閉鎖*/ 関数closeDiv() { var bg = document.getElementById("BgLayer"); var con = document.getElementById("レイヤー"); bg.style.display = "なし"; con.style.display = "なし"; } </スクリプト> 4: son.htmlの操作が親ページのメソッドを呼び出す コードをコピー コードは次のとおりです。<a href="javascript:void(0)" onclick="parent.window.showDiv()">表示</a> |
<<: CSS 3.0とビデオを組み合わせることでクリエイティブなオープニング効果を実現
>>: MySQL 8.0.26 のインストールと簡易チュートリアル (インターネット上で最も完全)
1.コアファイルプログラム実行中にセグメンテーション エラー (コア ダンプ) が発生すると、プログ...
MYSQLの解凍バージョンがインストールされます1: 解凍後、my.ini ファイルをコピーし、バイ...
公式、電子商取引、ソーシャル ネットワーキング、個人のいずれの Web サイトでも、訪問者に貴重な時...
適切なデータベース仕様は、ソフトウェア実装の複雑さを軽減し、通信コストを削減するのに役立ちます。この...
この記事では、MySQL の ROUND 関数を使用した丸め操作の落とし穴を例を使って説明します。ご...
関連記事: CentOS7でyumを使用してDockerをインストールするDockerを使ってWin...
MySQL ドキュメントでは、MySQL 変数はシステム変数とユーザー変数の 2 つのカテゴリに分類...
MySQL の追加、削除、変更、クエリステートメント1. 練習シートを作成するここでの練習表は3つの...
序文この記事は主にMySQL起動エラー2002の分析と解決方法を紹介しています。参考と勉強のために共...
Docker コンテナ間の相互接続と通信には 3 つの方法があります。 Docker 内部ネットワー...
進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...
1. グリッドレイアウト(グリッド): Web ページをグリッドに分割し、さまざまなグリッドを組み合...
効果確認アドレス:ツアープラン(uplanok.com) コード: img{幅: 100%;境界線の...
pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...
データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...