Pseudoelementas backdrop

Pseudoelementas backdrop nurodo, kad elementas turi būti išdėstytas po pačiu pirmuoju elementu z ašyje, bet virš visų kitų elementų. Šis pseudoelementas dažnai naudojamas puslapio fono patamsinimui, ant kurio atvaizduojami modaliai langai. Šiuo metu pseudoelementas backdrop veikia tik su modaliais langais, kurie sukurti naudojant elementą <dialog>.

Sintaksė

cssselektorius::backdrop {
  background: fonui skirtos spalvos;
}

Pavyzdys

Sukurkime, kad paspaudus mygtuką atsidarytų modalus langas, o puslapio fonas tuo pačiu būtų patamsintas:

html<button id="open">Atidaryti</button>
<dialog>
  <form method="dialog">
    <p>Tekstas tekstas tekstas</p>
    <button id="close">Uždaryti</button>
  </form>
</dialog>

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

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

Результат:

Taip pat žiūrėkite