Pseudo-element backdrop

Pseudo-element backdrop určuje umiestnenie zadanému prvku pod úplne prvým prvkom pozdĺž osi Z, ale nad ostatnými prvkami. Tento pseudo-element sa často používa na stmavenie pozadia stránky, na ktorej sú zobrazené modálne okná. Dnes pseudo-element backdrop funguje len s modálnymi oknami, ktoré boli vytvorené pomocou prvku <dialog>.

Syntax

cssselektor::backdrop {
  background: farba pre pozadie stránky;
}

Príklad

Vytvorme tak, aby po kliknutí na tlačidlo sa otvorilo modálne okno a pozadie stránky sa pri tom stmavilo:

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

Результат:

Pozri tiež