Pseudoelemento backdrop
O pseudoelemento backdrop define a posição
de um elemento especificado abaixo do primeiro elemento no eixo Z, mas acima
dos demais elementos. Este pseudoelemento é frequentemente
utilizado para escurecer o plano de fundo da página,
sobre o qual as janelas modais são exibidas.
Atualmente, o pseudoelemento backdrop
funciona apenas com janelas modais que foram criadas
usando o elemento <dialog>.
Sintaxe
seletor::backdrop {
background: cor para o plano de fundo da página;
}
Exemplo
Vamos fazer com que, ao clicar no botão, uma janela modal seja aberta e o plano de fundo da página fique escurecido:
<button id="open">Abrir</button>
<dialog>
<form method="dialog">
<p>Texto texto texto</p>
<button id="close">Fechar</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: grey;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
