疑似要素 backdrop

疑似要素 backdrop は、指定された要素を Z軸上で最初の要素の後ろ、しかし他のすべての要素の前に配置します。この疑似要素は、モーダルウィンドウを表示する際にページの背景を暗くするためによく使用されます。現在のところ、疑似要素 backdrop は <dialog> 要素を使用して作成されたモーダルウィンドウでのみ機能します。

構文

cssセレクター::backdrop {
  background: 背景用の色;
}

例

ボタンをクリックするとモーダルウィンドウが開き、その際にページの背景が暗くなるようにしてみましょう:

html<button id="open">開く</button>
<dialog>
  <form method="dialog">
    <p>テキスト テキスト テキスト</p>
    <button id="close">閉じる</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: grey;
}

javascriptlet elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());

Результат:

疑似要素 backdrop

構文

例

関連項目