::backdrop
Слой прямо под модальным `<dialog>` или элементом в полноэкранном режиме.
Синтаксис
dialog::backdrop { … }Примеры
Тёмная подложка под модальным диалогом:
<style>
dialog::backdrop { background: rgb(0 0 50 / 0.6); }
</style>
<button onclick="document.querySelector('dialog').showModal()">Open dialog</button>
<dialog>
<p>The page behind is dimmed.</p>
<form method="dialog"><button>Close</button></form>
</dialog>Примечания
Он появляется только у диалога, открытого через showModal(), — у открытого через show() подложки нет.
См. также
- backdrop-filter — Применяет фильтры ко всему, что находится за элементом, — эффект матового стекла.
- <dialog> — Диалоговое окно; модальное открывается методом `showModal()` и блокирует остальную страницу.
Вопросы и ответы по теме
В учебнике
- Раскрывающиеся блоки и диалоги — Тег details и summary, аккордеон, модальное окно dialog, закрытие через form method=dialog и всплывающие блоки popover.