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

cssseletor::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:

html<button id="open">Abrir</button>
<dialog>
  <form method="dialog">
    <p>Texto texto texto</p>
    <button id="close">Fechar</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: grey;
}

javascriptlet elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());

Результат:

Veja também