Backdrop Pseudo-element

Die pseudo-element backdrop spesifiseer die plasing van 'n gegewe element onder die heel eerste element op die Z-as, maar bo die res van die elemente. Hierdie pseudo-element word dikwels gebruik om die agtergrond van 'n bladsy te verduister, waarop modaalvensters vertoon word. Tans werk die pseudo-element backdrop slegs met modaalvensters wat geskep is met die <dialog> element.

Sintaksis

selektor::backdrop {
	background: agtergrondkleur;
}

Voorbeeld

Kom ons sorg dat wanneer 'n knoppie gedruk word, 'n modaalvenster oopmaak en die bladsy se agtergrond verduister word:

<button id="open">Maak Oop</button>
<dialog>
	<form method="dialog">
		<p>Hierdie is die modale inhoud</p>
		<button id="close">Sluit</button>
	</form>
</dialog>

body{
	height: 200px;
}
dialog {
	width: 200px;
}
dialog::backdrop {
	background-color: grys;
}

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

Sien Ook

die eienskap bottom,
wat die posisie van die onderkant van 'n element spesifiseer
die eienskap top,
wat die posisie van die bokant van 'n element spesifiseer
die eienskap left,
wat die posisie van die linkerkant van 'n element spesifiseer
die eienskap right,
wat die posisie van die regterkant van 'n element spesifiseer