Pseudo-element backdrop

Pseudo-element backdrop zadaje pozicioniranje navedenom elementu ispod samog prvog elementa na Z osi, ali iznad ostalih elemenata. Često se ovaj pseudo-element primenjuje za zatamnjivanje pozadine stranice, na kojoj se prikazuju modalni prozori. Na današnji dan pseudo-element backdrop radi samo sa modalnim prozorima, koji su kreirani pomoću elementa <dialog>.

Sintaksa

cssselektor::backdrop {
  background: boja za pozadinu stranice;
}

Primer

Hajde da napravimo tako da pri kliku na dugme se otvori modalni prozor, a pozadina stranice pri tome bude zatamnjena:

html<button id="open">Open</button>
<dialog>
  <form method="dialog">
    <p>Text text text</p>
    <button id="close">Close</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());

Результат:

Pogledajte takođe