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 のインストールと簡易チュートリアル (インターネット上で最も完全)

推薦する

Ubuntu Server のターミナルのウェルカム メッセージで広告を無効にする方法

最新の Ubuntu Server バージョンを使用している場合、ようこそメッセージに、Ubuntu...

MySQL公式パフォーマンステストツールmysqlslapの使い方の紹介

目次導入説明書実際の経験まとめ導入MySQL は最も人気のあるオープンソース データベースとして、さ...

Vue の詳細な入門ノート

目次1. はじめに2. 初期ビュー(I) Vueの概念を理解する(II) MVVMアーキテクチャ(I...

Reactフックとzarmコンポーネントライブラリ構成に基づいてh5フォームページを開発するためのサンプルコード

最近、React Hooks を zarm コンポーネント ライブラリと組み合わせて使用​​し、js...

nginx ロードバランシングを介して https にリダイレクトする方法

ウェブ上で証明書とキーをコピーするscp -rp -P52113 /application/ngin...

jsはaudioContextを通じて3Dサウンド効果を実現します

この記事では、audioContextを介して3Dサウンド効果を実現するためのjsの具体的なコードを...

CSS 配送先住所平行四辺形線スタイルの例コード

コードは次のようになります。 // 配送先住所の平行四辺形の線のスタイル <view clas...

MySQL の binlog ログと、binlog ログを使用してデータを回復する方法を説明します。

ご存知のとおり、binlog ログは MySQL データベースにとって非常に重要です。万が一、データ...

MySQL/MariaDB ルートパスワードリセットチュートリアル

序文パスワードを忘れることは、よく遭遇する問題です。MySQL または MariaDB データベース...

Webpack パッケージング CSS 背景画像パスの問題に対する完璧なソリューション

vue コンポーネントのスタイル タグ内には、背景画像を使用する次の CSS コードがあります。 背...

ドラッグアンドドロップによる並べ替えの詳細を実現する js

目次1. はじめに2. 実装3. HTML ドラッグ アンド ドロップ API を使用しないのはなぜ...

ウェブサイトのテキストはまだデザインする必要がありますか?

多くの人が、ウェブサイト上のテキストはデザインする必要があるのか​​と疑問に思うかもしれません。多く...

Linux のユーザーとグループ管理によく使われるコマンドの概要

この記事では、Linux のユーザーとグループの管理によく使用されるコマンドをまとめます。ご参考まで...

Nginx 静的サービス設定の詳細な説明 (ルートとエイリアスの指示)

静的ファイルNginx は高いパフォーマンスで知られており、フロントエンドのリバース プロキシ サー...

よくある MySQL テーブル設計エラーの概要

目次間違い1: データの列が多すぎる誤解2: 共同クエリが多すぎる誤解3: ENUMの代わりにSET...