Pseudo-elementul backdrop

Pseudo-elementul backdrop stabilește poziționarea elementului specificat sub primul element de-a lungul axei Z, dar deasupra celorlalte elemente. Adesea, acest pseudo-element este utilizat pentru întunecarea fundalului paginii, pe care sunt afișate ferestrele modale. În momentul de față, pseudo-elementul backdrop funcționează doar cu ferestrele modale care au fost create cu ajutorul elementului <dialog>.

Sintaxă

selector::backdrop {
	background: culoare pentru fundalul paginii;
}

Exemplu

Haideți să facem astfel încât la apăsarea butonului să se deschidă o fereastră modală, iar fundalul paginii în acest caz să fie întunecat:

<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());

Vedeți și

proprietatea bottom,
care stabilește poziția marginii inferioare a elementului
proprietatea top,
care stabilește poziția marginii superioare a elementului
proprietatea left,
care stabilește poziția marginii stângi a elementului
proprietatea right,
care stabilește poziția marginii drepte a elementului