:modal
Baseline 2022Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
:modal
は CSS の擬似クラスで、操作が解除されるまで、それ以外の要素とのすべての操作を除外する状態にある要素と一致します。 :modal
擬似クラスを使用して、複数の要素を同時に選択することができますが、アクティブになり、入力を受け付けることができるのはそのうちの 1 つのみです。
試してみましょう
構文
css
:modal {
/* ... */
}
使用上のメモ
ページの他の部分をユーザーが操作できないようにし、 :modal
擬似クラスによって選択される要素の例としては、例えば以下のようなものが含まれます。
dialog
要素がshowModal()
API で開かれたとき。requestFullscreen()
API で開かれたときに:fullscreen
擬似クラスで選択される要素。
例
モーダルダイアログのスタイル設定
結果
仕様書
Specification |
---|
HTML # selector-modal |
Selectors Level 4 # selectordef-modal |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:modal |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
dialog
要素- 他の要素表示状態擬似クラス:
:fullscreen
および:picture-in-picture
- 擬似クラスの一覧