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
seç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:
<button id="open">Aç</button>
<dialog>
<form method="dialog">
<p>Metin metin metin</p>
<button id="close">Kapat</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: gri;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
