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

cssselektor::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:

html<button id="open">Öppna</button>
<dialog>
  <form method="dialog">
    <p>Text text text</p>
    <button id="close">Stäng</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: grey;
}

javascriptlet elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());

Результат:

Se även