ポップアップウィンドウの上下中央左右と透明な背景のロックウィンドウ効果を実現する CSS

クリック後にポップアップボックスを実現し、上下左右に中央揃えし、灰色の透明マスクを追加してウィンドウをロックし、スクロールバーをクリアする簡単なCSSメソッドがあります。

HTMLコード

<div class="box">
	<div class="boxes">
	    <!-- 白いポップアップウィンドウ-->
	</div>
</div>

CSSコード

html、本文{
     幅: 100%;
     高さ: 100%;
 }
 。箱 {
     表示: なし;
     幅: 100%;
     高さ: 100%;
     位置: 固定;
     左:0;
     トップ:0;
     背景色:rgba(0,0,0,0.5);
 }
 .ボックス{
     幅: 400ピクセル;
     高さ: 300px;
     背景: #fff;
     ボックスの影: 1px 7px 18px 0px rgba(84, 115, 128, 0.11);
     境界線の半径: 4px;
     カーソル: ポインタ;
     位置: 絶対;
     左: 50%;
     上位: 50%;
     上マージン: -150px;
     左マージン: -200px;
 }

position:fixed を使用して透明な背景要素を固定すると、ウィンドウを効果的にロックしてスクロール バーのスクロールを防ぐことができます。また、親要素内の配置を使用して、子要素を上下左右の中央に配置することができます。ポップアップ操作に関しては、クリック イベントを外側の div の display 属性 (none と block) にリンクするだけで済みます。

CSSを使用して透明な背景のポップアップウィンドウを中央に配置し、ウィンドウをロックする方法についての記事はこれで終わりです。透明な背景のポップアップウィンドウを中央に配置し、ウィンドウをロックする方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。