Pseudo-element backdrop

Pseudo-element backdrop määrab määratud elemendi asukoha allpool kõige esimest elementi piki Z-telge, kuid ülejäänud elementidest kõrgemal. Sageli kasutatakse seda pseudo-elementi lehe tausta tumendamiseks, mille peal kuvatakse modaalaknad. Tänapäeval töötab pseudo-element backdrop ainult modaalakendega, mis on loodud kasutades elementi <dialog>.

Süntaks

cssvalija::backdrop {
  background: värv lehe taustaks;
}

Näide

Teeme nii, et nupu vajutamisel avaneks modaalaken, lehe taust oleks samal ajal tumendatud:

html<button id="open">Ava</button>
<dialog>
  <form method="dialog">
    <p>Tekst tekst tekst</p>
    <button id="close">Sulge</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());

Результат:

Vaata ka