A backdrop pszeudoelem
A backdrop pszeudoelem a megadott elem elhelyezését
állítja be a Z tengely mentén a legalsó elem alá, de a
többi elem fölé. Ezt a pszeudoelemet gyakran
alkalmazzák az oldal hátterének elsötétítésére, amelyen
a modális ablakok jelennek meg.
Jelenleg a backdrop pszeudoelem
csak azokkal a modális ablakokkal működik, amelyeket
a <dialog> elem segítségével hoztak létre.
Szintaxis
szelektor::backdrop {
background: szín az oldal hátteréhez;
}
Példa
Tegyük fel, hogy egy gomb megnyomásakor egy modális ablak nyílik meg, és ezalatt az oldal háttere elsötétü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());
:
