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

Псевдоелемент backdrop задаје позицију наведеном елементу испод самог првог елемента по Z оси, али изнад осталих елемената. Овај псевдоелемент се често користи за затamрање позадине странице, на којој се приказују модални прозори. Данас псевдоелемент 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: grey;
}

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

Результат:

Погледајте такође