Pseudo-element backdrop

Het pseudo-element backdrop specificeert de plaatsing van het opgegeven element onder het allereerste element op de Z-as, maar boven de overige elementen. Dit pseudo-element wordt vaak gebruikt om de achtergrond van de pagina te dimmen, waarop modale vensters worden weergegeven. Momenteel werkt het pseudo-element backdrop alleen met modale vensters die zijn gemaakt met het element <dialog>.

Syntaxis

selector::backdrop {
	background: kleur voor paginachtergrond;
}

Voorbeeld

Laten we ervoor zorgen dat wanneer er op een knop wordt geklikt, een modaal venster opent en de paginachtergrond ondertussen wordt gedimd:

<button id="open">Open</button>
<dialog>
	<form method="dialog">
		<p>Tekst tekst tekst</p>
		<button id="close">Sluiten</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());

Zie ook

de eigenschap bottom,
die de positie van de onderrand van het element specificeert
de eigenschap top,
die de positie van de bovenrand van het element specificeert
de eigenschap left,
die de positie van de linkerrand van het element specificeert
de eigenschap right,
die de positie van de rechterrand van het element specificeert