Pseudoprvek backdrop
Pseudoprvek backdrop nastavuje umístění
zadanému prvku pod úplně prvním prvkem podél osy Z, ale nad
ostatními prvky. Tento pseudoprvek se často
používá pro ztmavení pozadí stránky, na
které se zobrazují modální okna.
V současné době pseudoprvek backdrop
funguje pouze s modálními okny, která byla vytvořena
pomocí prvku <dialog>.
Syntaxe
selektor::backdrop {
background: barva pro pozadí stránky;
}
Příklad
Udělejme to, aby se po kliknutí na tlačítko otevřelo modální okno a pozadí stránky přitom bylo ztmavené:
<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());
:
