Pseudo-élément backdrop

Le pseudo-élément backdrop définit la position d'un élément spécifié en dessous du tout premier élément sur l'axe Z, mais au-dessus des autres éléments. Ce pseudo-élément est souvent utilisé pour assombrir l'arrière-plan de la page, sur lequel des fenêtres modales sont affichées. À ce jour, le pseudo-élément backdrop fonctionne uniquement avec les fenêtres modales créées à l'aide de l'élément <dialog>.

Syntaxe

csssélecteur::backdrop {
  background: couleur pour l'arrière-plan de la page;
}

Exemple

Faisons en sorte que lors du clic sur un bouton une fenêtre modale s'ouvre, et que l'arrière-plan de la page soit assombri à ce moment-là :

html<button id="open">Open</button>
<dialog>
  <form method="dialog">
    <p>Text text text</p>
    <button id="close">Close</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());

Результат:

Voir aussi