პსევდოელემენტი 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());
:
