声明
この記事を読むには、特定の基本的なHTML、CSS、JavaScriptが必要です
デザイン
ポップアップレイヤー効果を達成するというアイデアは非常に簡単です。最初に表示するコンテンツを非表示にし、特定の条件（ボタンをクリックするなど）をトリガーした後、元々非表示のコンテンツを表示します。
成し遂げる
<！Doctype html> <html> <head> <title>ウィンドウオブジェクト</title> <meta charset = "utf-8"> </head> <body> < LightBlue; Border：1PX Solid Green; " id = "Toast"> <！ - ディスプレイ属性をなしに設定してコンテンツを非表示にします - > <p>これはポップアップレイヤーコンテンツです</p> <ボタンタイプ= "ボタン" id "=" close ">閉じる</button> </div> <script"> var toast = document.getelementbyid（ "toast"）; document.getElementById（ "open"）。onclick = function（e）{<！ - クリックイベントを定義して非表示コンテンツを表示します - > toast.style.display = "block"; toast.style.position = "sixed"; var winwidth = window.innerwidth; var winheight = window.innerheight; var targetwidth = toast.offsetwidth; var targetheight = toast.offsetheight; toast.style.top =（winheight -targetheight） / 2 + "px"; toast.style.left =（winwidth -targetwidth） / 2 + "px"; } document.getElementById（ "close"）。onclick = function（e）{<！ - 表示されたコンテンツを再び非表示 - > toast.style.display = "none"; } </script> </body> </html>ディスプレイ効果は次のとおりです。
しかし、非表示のコンテンツが表示された後、リンクを介してBaiduページに入ることができることがわかります。これを防ぐために、元のページコンテンツをすべてカバーするマスクレイヤーを提供できます。コードは次のとおりです。
<！Doctype html> <html> <head> <title>ウィンドウオブジェクト</title> <meta charset = "utf-8"> </head> <body> <固定;幅：100％;高さ：100％;トップ：0px;左：0px;背景：灰色; "> <！ - マスクレイヤーを介して背景をマスク - > <div style ="背景：lightblue; border：1px solid緑; " id = "Toast"> <！ - コンテンツを非表示にするために表示なしに表示属性を設定します - > <p>ポップアップレイヤーコンテンツ</p> <ボタンタイプ= "ボタン" id = "close">閉じる</button> </div> </div> <script = "text/javascript"> var toast = documentelementbyid（ "toast"）; var cover = document.getElementById（ "Cover"）; document.getElementById（ "open"）。onclick = function（e）{<！ - クリックイベントを定義して非表示コンテンツを表示します - > cover.style.display = "block"; toast.style.position = "sixed"; var winwidth = window.innerwidth; var winheight = window.innerheight; var targetwidth = toast.offsetwidth; var targetheight = toast.offsetheight; toast.style.top =（winheight -targetheight） / 2 + "px"; toast.style.left =（winwidth -targetwidth） / 2 + "px"; } document.getElementById（ "close"）。onclick = function（e）{<！ - 表示されたコンテンツを再び非表示 - > cover.display = "none"; } </script> </body> </html>これは、下の図に示すように、次のテスト結果です。
要約します
上記のコンテンツは、ポップアップレイヤー効果を単純に実装しますが、コードを追加することにより、この基準でより複雑な関数を実装できます。
JavaScriptを使用してポップアップレイヤー効果を実現する上記の簡単な例は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。