この記事の例では、js CSS を使用して全画面にグレーと黒の透明なマスク効果をポップアップ表示する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。 このエフェクトは多くの Web サイトで見られ、特定の操作が実行されると、灰色と黒の半透明のマスクが表示され、その上で指定されたコンテンツを操作できます。たとえば、ログイン ボックスが表示されます。この効果を実現する方法のコード例は次のとおりです: コードをコピーします コードは次のとおりです。 <メタ文字セット = " utf-8" > CSS スクリプトを使用して全画面にグレーと黒の透明なマスク効果をポップアップする方法 * <br> { <br> マージン:0px; パディング:0px; }<br> .zhezhao <br> { <br> 幅:100%; 高さ:100%; 背景色:#000; フィルター:アルファ(不透明度=50); -moz-不透明度:0.5; 不透明度:0.5; 位置:絶対; 左:0px; トップ:0px; 表示:なし<br> z-インデックス:1000; }<br> .ログイン<br> { <br> 幅:280px; 高さ:180ピクセル<br> 位置:絶対; 上:200ピクセル<br> 左:50%; 背景色:#000; マージン左:-140px; 表示:なし<br> z-インデックス:1500; }<br> .content <br> { <br> マージントップ:50px; 色:赤<br> 行の高さ:200px; 高さ:200ピクセル<br> テキスト整列:中央<br> }<br> </スタイル> <br> <スクリプトタイプ="text/javascript"> window.onload=function() <br> { <br> var zhezhao=document.getElementById("zhezhao"); var login=document.getElementById("ログイン"); var bt=document.getElementById("bt"); var btclose=document.getElementById("btclose"); <br> bt.onclick=function() <br> { <br> zhezhao.style.display="ブロック" <br> login.style.display="ブロック" <br> }<br> btclose.onclick=function() <br> { <br> zhezhao.style.display="none"; login.style.display="none"; }<br> }<br> </スクリプト> <br> </頭> <br> <br> <div class="zhezhao" id="zhezhao"></div> <br> <div class="login" id="login"><button id="btclose">クリックして閉じます</button></div> <br> <div class="content">スクリプト ホームへようこそ。<button id="bt">クリックしてマスクをポップアップ表示します</button></div> <br> </本文> <br> </html><br><br> <br>上記は基本的なマスク機能を実装しています。クリックしてマスクをポップアップすると、クリックしてマスクを閉じると、マスク効果が消えます。この効果を実現する方法は次のとおりです: <br> <br><br>実装原則:<br><br> <br>全画面 div を作成し、ドキュメント フローから切り離して他の要素に影響を与えないように絶対配置を使用し、半透明の状態に設定します。 もちろん、この透明度は で調整できます。これも絶対配置を使用するログイン要素を作成し、その z-index 属性値を画面上の div より大きく設定します。この時点では、フルスクリーン div ではカバーされません。デフォルトでは、これら 2 つの div の表示属性値は none です。対応するボタンをクリックすると、表示属性値を変更できます。 <br> <br><br>推奨:<br>コードはできるだけ手書きで書くことで、学習の効率と深さを効果的に向上させることができます。 <br> <br>この記事が皆さんの Web プログラミング設計に役立つことを願っています。 <br> </div>
