iframe子ページは親ページを操作し、ページポップアップレイヤーをシールドする効果を実装します。

iframe子ページは親ページを操作し、ページポップアップレイヤーをシールドする効果を実装します。
質問: 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 のインストールと簡易チュートリアル (インターネット上で最も完全)

推薦する

単一のMySQLテーブルを復元する手順

休憩中に、眠気を完全に吹き飛ばす電話がかかってきました。「開発者が更新 SQL を書くときに whe...

テーブルを使用してフォームコントロールの形式を調整し、見栄えを良くします。

自分でウェブページを書きたいので、HTML 言語についても少し勉強しています。これは、大学時代にウェ...

rem をモバイル デバイスに適応させる方法の例

序文モバイル端末のREM適応ソリューションのレビューと概要remの使い方rem 単位の計算は、HTM...

Javascript イベントキャプチャとバブリングメソッドの詳細な説明

目次1. イベント処理モデル1. イベントバブリング(1)3つのdiv要素にイベントをバインドする(...

MySQLの連結関数CONCATの使い方の詳しい説明

前回の記事では、MySQL の置換関数 (Replace) とセグメンテーション関数 (SubStr...

HTML Web ページにおける URL の表現

HTML では、一般的な URL はさまざまな方法で表現されます。相対 URL:コードをコピーコード...

Linux環境でユーザーにsudo権限を追加する方法

sudo 設定ファイルsudo のデフォルトの設定ファイルは /etc/sudoers です。一般的...

ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション

これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...

JavaScript 配列重複排除ソリューション

目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...

MySQLユーザー権限テーブルについての簡単な説明

MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...

docker nginxコンテナの起動とローカルへのマウントの詳細な説明

まず、nginx コンテナ内の構造:コンテナを入力します: docker exec -it b511...

初心者がHTMLタグを学ぶ(3)

HTML に触れる初心者は、いくつかの HTML タグを学びます。関連記事:初心者が学ぶ HTML...

Angularコンポーネントの仲介モードの詳細な説明

目次1. 仲介業者モデル2. 例1. 見積コンポーネントに購入ボタンを追加する2. 親コンポーネント...

HTML テーブル マークアップ チュートリアル (29): セルのライト境界線の色属性 BORDERCOLORLIGHT

セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...

Mysql のフィールドのデータの一部をバッチ置換する (推奨)

MYSQL のフィールドのデータの一部をバッチで置き換えます。具体的な導入は次のとおりです。 1....