Widely available YES。全主要ブラウザで対応済み。Baseline Widely available。本番利用を推奨。

:modal pseudo-class

:modal は CSS の擬似クラスで、操作が解除されるまで、それ以外の要素とのすべての操作を除外する状態にある要素と一致します。 :modal 擬似クラスを使用して、複数の要素を同時に選択することができますが、アクティブになり、入力を受け付けることができるのはそのうちの 1 つのみです。

セレクターダイアログ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:modal
105
105
103
15.6
105
15.6
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
dialog:modal {
  border: none;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 480px;
}

dialog:modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

ライブデモ

modaldialog

:modal pseudo-class modaldialog demo.

プレビュー全画面表示

background or effect

:modal pseudo-class background or effect demo.

プレビュー全画面表示

fulskri-n style

:modal pseudo-class fulskri-n style demo.

プレビュー全画面表示

実務での使いどころ

  • モーダルダイアログのスタイリング

    showModal() で開かれたダイアログにのみ特別なスタイルを適用。

  • フルスクリーン要素の装飾

    フルスクリーンモードの動画プレーヤーにカスタムスタイルを適用。

注意点

  • show() で開いた非モーダルダイアログにはマッチしない。
  • dialog 要素のネイティブ対応を前提とする。

アクセシビリティ

  • モーダルダイアログには適切な aria-label または aria-labelledby を設定する。
  • Escape キーでの閉じる操作を妨げないようにする。

参考リンク