疑似要素 backdrop
疑似要素 backdrop は、指定された要素を
Z軸上で最初の要素の後ろ、しかし他のすべての要素の前に配置します。
この疑似要素は、モーダルウィンドウを表示する際に
ページの背景を暗くするためによく使用されます。
現在のところ、疑似要素 backdrop は
<dialog> 要素を使用して作成された
モーダルウィンドウでのみ機能します。
構文
セレクター::backdrop {
background: 背景用の色;
}
例
ボタンをクリックするとモーダルウィンドウが開き、 その際にページの背景が暗くなるようにしてみましょう:
<button id="open">開く</button>
<dialog>
<form method="dialog">
<p>テキスト テキスト テキスト</p>
<button id="close">閉じる</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: grey;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
