Psevdoelement backdrop
Psevdoelement backdrop göstərilən elementin
Z oxu üzrə ən birinci elementdən aşağıda, lakin
digər elementlərdən yuxarıda yerlesdirilmesini teyin edir.
Tez-tez bu psevdoelement
səhifə fonunun qaraldılması üçün istifadə olunur,
hansı ki, modal pəncərələr göstərilir.
Bugünə qədər backdrop psevdoelementi
yalnız <dialog> elementi ile yaradılmış
modal pəncərələr ile işleyir.
Sintaksis
selektor::backdrop {
background: sehife fonu üçün reng;
}
Nümunə
Gelin edek ki, düymə basıldıqda modal pəncərə açılsın, ve bu zaman səhifə fonu qaralsın:
<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());
:
