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

csspemilih::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:

html<button id="open">Buka</button>
<dialog>
  <form method="dialog">
    <p>Teks teks teks</p>
    <button id="close">Tutup</button>
  </form>
</dialog>

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

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

Результат:

Lihat juga