Pseudoprvek backdrop

Pseudoprvek backdrop nastavuje umístění zadanému prvku pod úplně prvním prvkem podél osy Z, ale nad ostatními prvky. Tento pseudoprvek se často používá pro ztmavení pozadí stránky, na které se zobrazují modální okna. V současné době pseudoprvek backdrop funguje pouze s modálními okny, která byla vytvořena pomocí prvku <dialog>.

Syntaxe

cssselektor::backdrop {
  background: barva pro pozadí stránky;
}

Příklad

Udělejme to, aby se po kliknutí na tlačítko otevřelo modální okno a pozadí stránky přitom bylo ztmavené:

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

Результат:

Viz také