Beberapa helah CSS untuk elemen Dialog HTML

Kebelakangan ini saya telah bereksperimen dengan elemen HTML <dialog>. Ia sangat mudah untuk dialog asli tanpa banyak JavaScript.

Jika anda ingin melihat dengan cepat cara ia berfungsi, anda boleh melawati My Games Jumblie dan klik butang gear Tetapan di bahagian atas.

Baiklah! Berikut ialah beberapa petua yang mungkin berguna untuk anda apabila melaksanakan <dialog> anda sendiri di tapak web anda!

Kabur<dialog>Latar Belakang

::backdrop Elemen pseudo CSS tidak terhad kepada <dialog>. Anda boleh menggayakannya mengikut kehendak anda, tetapi jika anda mahu menjadikannya ringkas, anda boleh menambah penapis kabur seperti ini untuk mengaburkan sedikit latar belakang:

<code>dialog::backdrop {
  backdrop-filter: blur(2px);
}</code>

Sudah tentu, anda juga boleh menambah atribut lain, seperti background-color. Jika anda ingin mendalami perkara ini, saya juga telah menulis artikel tentang menggayakan elemen pseudo dengan JavaScript!

<dialog>Lumpuhkan penatalan halaman apabila membuka

Ini ialah pemilih istimewa yang hebat. Apabila <dialog> dihidupkan, ia menambahkan atribut open pada teg.

<code>body:has(dialog[open]) {
  overflow: hidden;
}</code>

Pemilih ini menyemak sama ada body mengandungi open dengan atribut <dialog>. Jika ya, lumpuhkan penatalan halaman! Sudah tentu, perkara yang ganjil ialah jika dialog anda tinggi, anda mungkin perlu mendayakan tatal di dalamnya secara berasingan, tetapi ini akan menghalang halaman di belakang dialog daripada bergerak semasa menatal.

Itu sahaja! Harap ini membantu!

Atas ialah kandungan terperinci Beberapa helah CSS untuk elemen Dialog HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!