Backdrop Pseudo-element

Die pseudo-element backdrop spesifiseer die plasing van 'n gegewe element onder die heel eerste element op die Z-as, maar bo die res van die elemente. Hierdie pseudo-element word dikwels gebruik om die agtergrond van 'n bladsy te verduister, waarop modaalvensters vertoon word. Tans werk die pseudo-element backdrop slegs met modaalvensters wat geskep is met die <dialog> element.

Sintaksis

cssselektor::backdrop {
  background: agtergrondkleur;
}

Voorbeeld

Kom ons sorg dat wanneer 'n knoppie gedruk word, 'n modaalvenster oopmaak en die bladsy se agtergrond verduister word:

html<button id="open">Maak Oop</button>
<dialog>
  <form method="dialog">
    <p>Hierdie is die modale inhoud</p>
    <button id="close">Sluit</button>
  </form>
</dialog>

cssbody{
  height: 200px;
}
dialog {
  width: 200px;
}
dialog::backdrop {
  background-color: grys;
}

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

Результат:

Sien Ook