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

Результат:

იხილეთ აგრეთვე