Псевдоэлемент 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());
:
