Псевдоелемент backdrop

Псевдоелементът backdrop задава позициониране на указания елемент под самия първи елемент по оста Z, но над останалите елементи. Често този псевдоелемент се използва за затъмняване на фона на страницата, на който се извеждат модални прозорци. Към днешна дата псевдоелементът backdrop работи само с модални прозорци, които са създадени с помощта на елемента <dialog>.

Синтаксис

cssселектор::backdrop {
  background: цвят за фон на страницата;
}

Пример

Нека направим така, че при натискане на бутон да се отвори модален прозорец, а фонът на страницата при това да бъде затъмнен:

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

Результат:

Вижте също