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

Псевдоелементот backdrop го поставува позиционирањето на назначениот елемент под самиот прв елемент по Z-оската, но над останатите елементи. Често овој псевдоелемент се користи за затемнување на позадината на страницата, на која се прикажуваат модални прозорци. Денес псевдоелементот backdrop работи само со модални прозорци кои се создадени со елементот <dialog>.

Синтакса

cssселектор::backdrop {
  background: боја за позадина на страницата;
}

Пример

Ајде да направиме така што при кликнување на копчето да се отвори модален прозорец, а позадината на страницата при тоа да биде затемнета:

html<button id="open">Отвори</button>
<dialog>
  <form method="dialog">
    <p>Текст текст текст</p>
    <button id="close">Затвори</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: сива;
}

javascriptlet elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());

Результат:

Погледнете исто така