CSS селектор :modal — відкритий модальний діалог

CSS псевдоклас :modal вибирає елемент у модальному стані — насамперед <dialog>, відкритий через showModal().

правити

Загальний опис

Модальний стан означає, що решта сторінки для взаємодії заблокована. Саме за цією ознакою й вибирає селектор — тому діалог, відкритий звичайним show(), під нього не потрапляє.

правити

+ додати пораду чи нотатку

Синтаксис

:modal

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
modal	105+	103+	15.6+	91+	105+	-

Підтримка: мобільні переглядачі

Переглядач
modal	105+	yes	yes	15.6+

Приклади

+ запропонувати свій приклад у пісочниці

<dialog id="dlg">
    <p>Модальне вікно</p>
    <button onclick="dlg.close()">Закрити</button>
</dialog>
<button onclick="dlg.showModal()">Відкрити</button>

dialog:modal {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgb(0 0 0 / .25);
}

dialog:modal::backdrop {
    background: rgb(0 0 0 / .5);
}