backdrop Pseudo-elementi

backdrop pseudo-elementi, belirtilen elementi Z eksenindeki en ilk elementin altına, ancak diğer tüm elementlerin üstüne yerleştirir. Bu pseudo-element genellikle modal pencerelerin gösterildiği sayfa arka planını karartmak için kullanılır. Günümüzde backdrop pseudo-elementi sadece <dialog> elementi ile oluşturulmuş modal pencerelerle çalışmaktadır.

Sözdizimi

cssseçici::backdrop {
  background: arka plan rengi;
}

Örnek

Bir butona tıklandığında bir modal pencere açılsın ve bu sırada sayfa arka planı kararsın:

html<button id="open">Aç</button>
<dialog>
  <form method="dialog">
    <p>Metin metin metin</p>
    <button id="close">Kapat</button>
  </form>
</dialog>

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

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

Результат:

Ayrıca Bakınız