Псеўдаэлемент backdrop
Псеўдаэлемент backdrop задае размяшчэнне
паказанаму элементу ніжэй самага першага элемента па восі Z, але вышэй
астатніх элементаў. Часта даны псеўдаэлемент
ужываецца для зацянення фону старонкі, на
якім выводзяцца мадальныя аконцы.
На сённяшні дзень псеўдаэлемент backdrop
працуе толькі з мадальнымі аконцамі, якія былі створаны
з дапамогай элемента <dialog>.
Сінтаксіс
селектар::backdrop {
background: колер для фону старонкі;
}
Прыклад
Давайце зробім так, каб пры націску кнопкі адкрылася мадальнае акенца, а фон старонкі пры гэтым быў зацямнёны:
<button id="open">Open</button>
<dialog>
<form method="dialog">
<p>Text text text</p>
<button id="close">Close</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: grey;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
