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

Псевдоэлемент backdrop берилган элементнинг жойлаш ўрнини Z ўки буйича энг биринчи элементдан пастрокда, лекин бошка элементлардан юкорирокда кўрсатади. Кўпинча бу псевдоэлемент саҳифа фонни қорайтириш учун ишлатилади, унда модал дарёзалар кўрсатилади. Бугунги кунда псевдоэлемент backdrop фақат модал дарёзалар билан ишлайди, улар <dialog> элементи ёрдамида яратилган.

Синтаксис

cssселектор::backdrop {
  background: фон учун ранг;
}

Мисол

Келтинг, тугмани босганда модал дарёза очилишини, ва бу вактда саҳифа фони қорайишини таъминлайми:

html<button id="open">Open</button>
<dialog>
  <form method="dialog">
    <p>Text text text</p>
    <button id="close">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());

Результат:

Қаранг