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

cssvalitsija::backdrop {
  background: väri sivun taustalle;
}

Esimerkki

Tehdään niin, että kun painetaan painiketta, modaalinen ikkuna avautuu ja sivun tausta samalla tummenee:

html<button id="open">Avaa</button>
<dialog>
  <form method="dialog">
    <p>Tekstiä tekstiä tekstiä</p>
    <button id="close">Sulje</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());

Результат:

Katso myös