A backdrop pszeudoelem

A backdrop pszeudoelem a megadott elem elhelyezését állítja be a Z tengely mentén a legalsó elem alá, de a többi elem fölé. Ezt a pszeudoelemet gyakran alkalmazzák az oldal hátterének elsötétítésére, amelyen a modális ablakok jelennek meg. Jelenleg a backdrop pszeudoelem csak azokkal a modális ablakokkal működik, amelyeket a <dialog> elem segítségével hoztak létre.

Szintaxis

cssszelektor::backdrop {
  background: szín az oldal hátteréhez;
}

Példa

Tegyük fel, hogy egy gomb megnyomásakor egy modális ablak nyílik meg, és ezalatt az oldal háttere elsötétül:

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());

Результат:

Lásd még