Pseudo-elemen backdrop
Pseudo-elemen backdrop menetapkan penempatan
kepada elemen yang ditentukan di bawah elemen paling pertama pada paksi Z, tetapi di atas
elemen-elemen lain. Pseudo-elemen ini sering
digunakan untuk menggelapkan latar belakang halaman, di
mana tetingkap modal dipaparkan.
Sehingga hari ini, pseudo-elemen backdrop
hanya berfungsi dengan tetingkap modal, yang dicipta
menggunakan elemen <dialog>.
Sintaks
pemilih::backdrop {
background: warna untuk latar belakang halaman;
}
Contoh
Mari kita buat supaya apabila butang ditekan tingkap modal terbuka, dan latar belakang halaman pada masa itu menjadi gelap:
<button id="open">Buka</button>
<dialog>
<form method="dialog">
<p>Teks teks teks</p>
<button id="close">Tutup</button>
</form>
</dialog>
body{
height: 200px;
}
dialog {
width: 200px;
}
dialog::backdrop {
background-color: kelabu;
}
let elem = document.querySelector('dialog');
let openBtn = document.querySelector('#open');
let closeBtn = document.querySelector('#close');
openBtn.addEventListener('click', () => elem.showModal());
:
