Отображается ниже самого верхнего элемента в стеке по оси Z

Описание

Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно ::backdrop применяется для затемнения страницы, чтобы акцентировать внимание на фотографии или диалоговом окне, которые выводятся поверх такого затемнения.

В настоящее время работает только с модальными окнами, созданными с помощью элемента dialog.

Синтаксис

Селектор::backdrop { content: 'текст' }

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
dialog {
width: 300px;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.7);
}
</style>
<button id='openDialog'>Вход на сайт</button>
<dialog>
<form id='authentication'>
<p><input name='login' required autofocus placeholder='Логин' /></p>
<p><input type='password' name='pass' required placeholder='Пароль' /></p>
<p>
<button type='submit'>Войти</button>
<button id='closeDialog'>Закрыть окно</button>
</p>
</form>
</dialog>
<script>
var dialog = document.querySelector('dialog');
document.querySelector('#openDialog').onclick = function () {
dialog.showModal();
};
document.querySelector('#closeDialog').onclick = function () {
dialog.close();
};
</script>
</body>
</html>

Читайте также