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