Pseudoelement backdrop

Pseudoelement backdrop ustawia pozycjonowanie określonemu elementowi poniżej pierwszego elementu wzdłuż osi Z, ale powyżej pozostałych elementów. Często ten pseudoelement stosuje się do przyciemnienia tła strony, na którym wyświetlane są modalne okienka. Obecnie pseudoelement backdrop działa tylko z modalnymi okienkami, które zostały utworzone za pomocą elementu <dialog>.

Składnia

cssselektor::backdrop {
  background: kolor dla tła strony;
}

Przykład

Sprawmy, aby po kliknięciu przycisku otworzyło się modalne okienko, a tło strony przy tym było przyciemnione:

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

Результат:

Zobacz też