Pseudo-elementet backdrop
Pseudo-elementet backdrop anger placering
för det angivna elementet under det allra första elementet längs Z-axeln, men ovanför
andra element. Ofta används detta pseudo-element
för att mörka bakgrunden på en sida, på
vilken modala fönster visas.
Idag fungerar pseudo-elementet backdrop
endast med modala fönster som har skapats
med hjälp av elementet <dialog>.
Syntax
selektor::backdrop {
background: färg för sidbakgrund;
}
Exempel
Låt oss göra så att när knappen trycks öppnas ett modalt fönster, och sidans bakgrund samtidigt är förmörkad:
<button id="open">Öppna</button>
<dialog>
<form method="dialog">
<p>Text text text</p>
<button id="close">Stäng</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());
:
