Pseudoelement backdrop
Pseudoelement backdrop ustawia pozycjonowanie
określonemu elementowi poniżej pierwszego elementu wzdłuż osi Z, ale powyżej
pozostałych elementów. Często ten pseudoelement
stosuje się do przyciemnienia tła strony, na
którym wyświetlane są modalne okienka.
Obecnie pseudoelement backdrop
działa tylko z modalnymi okienkami, które zostały utworzone
za pomocą elementu <dialog>.
Składnia
selektor::backdrop {
background: kolor dla tła strony;
}
Przykład
Sprawmy, aby po kliknięciu przycisku otworzyło się modalne okienko, a tło strony przy tym było przyciemnione:
<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());
:
