Backdrop-pseudoelementti
Pseudoelementti backdrop asettaa sijoittamisen
määritetylle elementille Z-akselilla ensimmäisen elementin alapuolelle, mutta
muiden elementtien yläpuolelle. Tätä pseudoelementtiä
käytetään usein sivun taustan tummentamiseen, kun
modaalisia ikkunoita näytetään.
Tänä päivänä pseudoelementti backdrop
toimii vain modaalisten ikkunoiden kanssa, jotka on luotu
käyttämällä <dialog>-elementtiä.
Syntaksi
valitsija::backdrop {
background: väri sivun taustalle;
}
Esimerkki
Tehdään niin, että kun painetaan painiketta, modaalinen ikkuna avautuu ja sivun tausta samalla tummenee:
<button id="open">Avaa</button>
<dialog>
<form method="dialog">
<p>Tekstiä tekstiä tekstiä</p>
<button id="close">Sulje</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());
:
