Pseudo-element backdrop
Pseudo-element backdrop určuje umiestnenie
zadanému prvku pod úplne prvým prvkom pozdĺž osi Z, ale nad
ostatnými prvkami. Tento pseudo-element sa často
používa na stmavenie pozadia stránky, na
ktorej sú zobrazené modálne okná.
Dnes pseudo-element backdrop
funguje len s modálnymi oknami, ktoré boli vytvorené
pomocou prvku <dialog>.
Syntax
selektor::backdrop {
background: farba pre pozadie stránky;
}
Príklad
Vytvorme tak, aby po kliknutí na tlačidlo sa otvorilo modálne okno a pozadie stránky sa pri tom stmavilo:
<button id="open">Otvoriť</button>
<dialog>
<form method="dialog">
<p>Text text text</p>
<button id="close">Zatvoriť</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());
:
