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: grey;
}

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

Результат:

Дагы караңыз