:modal

Baseline 2022

Новое

С сентября 2022 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

Псевдокласс :modal CSS псевдокласс соответствует элементу, находящемуся в состоянии, в котором он исключает любое взаимодействие с элементами вне его, пока взаимодействие не будет отменено. Несколько элементов могут быть выбраны псевдоклассом :modal одновременно, но только один из них будет активным и сможет получать ввод.

Попробовать

Синтаксис

:modal {
  /* ... */
}

Примечания к использованию

Примеры элементов, которые будут препятствовать взаимодействию пользователя с остальной частью страницы и будут выбраны псевдоклассом :modal включают:

Элемент dialog, открытый с помощью API showModal().
Элемент, выбранный псевдоклассом :fullscreen, когда он открыт с помощью API requestFullscreen().

Примеры

Стиль модального диалога

В этом примере показано форматирование модального диалога, который открывается при активации кнопки «Обновить данные». Этот пример построен на основе элемента <dialog> пример.

CSS

:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}

Результат

Спецификации

Спецификация
Селекторы Уровень 4 # modal-state

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:modal`	105	105	103	91	15.6	105	103	72	15.6	20.0	105

См. также

dialog элемент
Другие псевдоклассы состояния отображения элемента: :fullscreen и :picture-in-picture
Полный список псевдоклассов

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:modal