この章では、ボタンをクリックして中央にウィンドウをポップアップする方法を紹介します。このウィンドウには半透明のマスク レイヤー効果があります。もちろん、この効果はより複雑な実装方法があり、もちろん効果はより豪華です。 . 以下に紹介するコードで簡単に実装できます。 コードは次のとおりです: コードをコピーします コードは次のとおりです: ://www.softwhy .com/" /> アリ族 <br>#fade { <br>表示:なし; <br>位置:絶対; <br>幅:100%; <br>背景色:黒; <br> z-index:1001; <br>不透明度: 0.8; <br>フィルター:alpha(opacity=80); { <br>表示:なし; <br>上:25%; <br>高さ:50%;パディング:16px; <br>ボーダー:白; <br>オーバーフロー:自動; 🎜>< スクリプト type="text/javascript"> <br>window.onload=function(){ <br>var linkbt=document.getElementById("linkbt"); 'ライト') ; <br>var fade=document.getElementById('fade'); <br>var closebt=document.getElementById("closebt"); <br>linkbt.onclick=function(); .style.display ='block'; <br>fade.style.display='block'; <br>} <br>closebt.onclick=function(){ <br>light.style.display='none'; <br>fade .style.display='none'; <br>} <br>} <br></head> <br><body< href="javascript :void(0)" id="linkbt"> ここをクリックしてウィンドウを開きます</a> <br><div id="light"><a href="javascript:void( 0)" id= "closebt">ウィンドウを閉じる</a></div> <br><div id="fade"><br></body> ></ html> <br><br> <br>上記のコードは、その実装プロセスを簡単に紹介します。 <br>1. 実装原理: <br>デフォルトの状態では、マスクレイヤーとウィンドウは非表示になっており、リンクをクリックするとウィンドウとマスクレイヤーを表示し、マスクレイヤーを半分に設定できます。透明な状態。どちらの要素も絶対位置を使用し、マスク レイヤをカバーできるように、中央に配置されたウィンドウの z-index 属性値をマスク レイヤより大きく設定します。閉じるボタンをクリックすると、マスクレイヤーとウィンドウを非表示にすることができます。原理はほぼ同じです。</div>
