backdrop псевдоэлементи
backdrop псевдоэлементи көрсөтүлгөн элементти
Z огу боюнча биринчи элементден төмөн, бирок калган
элементтерден жогору орнотот. Бул псевдоэлемент көбүнчө
беттин фонун караңгылатуу үчүн колдонулат, ал фондо
модалдык терезелер чыгарылат.
Бүгүнкү күндө backdrop псевдоэлементи
<dialog> элементи менен түзүлгөн
модалдык терезелер менен гана иштейт.
Синтаксис
тандоочу::backdrop {
background: бет фону үчүн түс;
}
Мисал
Келгиле, баскычты басканда модалдык терезе ачылып, ал эми беттин фону караңгыланып тургандай кылалы:
<button id="open">Ачуу</button>
<dialog>
<form method="dialog">
<p>Текст текст текст</p>
<button id="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());
:
