Tingkap modal dan kotak cahaya boleh melaksanakan fungsi asas melalui CSS tulen tanpa JavaScript. 1. Gunakan: sasaran kelas pseudo untuk mengawal status paparan berdasarkan titik utama URL. Kelebihannya ialah tidak ada skrip yang diperlukan, tetapi topeng tidak dapat ditutup; 2. Gunakan kotak semak dan label tersembunyi untuk mencapai interaksi yang lebih fleksibel, seperti mengklik topeng untuk menutup dan menambah peralihan animasi; 3. Beri perhatian kepada butiran pengoptimuman seperti keserasian, kebolehcapaian (seperti menambah label Aria), dan mencegah skrol latar belakang (menggunakan limpahan: tersembunyi). Kedua -dua kaedah ini mempunyai senario yang sesuai, sesuai untuk halaman statik atau projek ringan.

Tingkap modal dan kotak cahaya adalah komponen interaktif biasa di laman web, yang digunakan untuk muncul lapisan topeng lut pada halaman semasa dan memaparkan kandungan tambahan. Melaksanakannya sebenarnya tidak memerlukan JavaScript yang kompleks, dan menggunakan CSS tulen juga boleh mencapai fungsi asas, terutama yang sesuai untuk halaman statik atau keperluan ringan.

Struktur asas dan kaedah pencetus

Untuk membuat tetingkap modal, struktur HTML biasanya termasuk:

• Butang Pencetus (seperti "Klik untuk Buka")
• Lapisan topeng (lapisan atau latar belakang)
• Kawasan kandungan tetingkap pop timbul (kandungan modal)

Gunakan CSS untuk mengawal paparan keadaan tersembunyi, yang boleh dikawal oleh :target kelas pseudo atau digabungkan dengan keadaan checkbox checked . :target adalah cara yang paling mudah, tetapi ia memerlukan titik utama dalam URL; Walaupun checkbox lebih fleksibel dan tidak mengubah bar alamat.

 <a href = "#modal"> Buka tetingkap pop timbul </a>
<div id = "modal" class = "modal">
  <div class = "modal-content">
    <a href = "#"> tutup </a>
    <p> Ini adalah kandungan pop timbul </p>
  </div>
</div>

Gaya dan kawalan interaktif

Bahagian ini terutamanya bergantung pada CSS untuk melengkapkan ekspresi visual dan logik interaktif.

Gunakan: Sasaran untuk menukar

Kaedah ini menggunakan titik utama untuk mengaktifkan pop timbul, dan apabila URL mengandungi #modal , elemen yang sepadan akan menggunakan gaya.

 .modal {
  Paparan: Tiada;
}

.modal: sasaran {
  paparan: blok;
  Kedudukan: Tetap;
  Atas: 0; Kiri: 0;
  Lebar: 100%; Ketinggian: 100%;
  latar belakang warna: RGBA (0,0,0,0.5);
}

Kelebihan kaedah ini ialah ia tidak menggunakan Js sama sekali, dan kelemahannya adalah bahawa ia tidak dapat menutup tetingkap pop timbul dengan mengklik topeng kecuali ia menambah pautan ke lokasi lain pada halaman.

Gunakan kotak semak untuk mengawal status

Pendekatan yang lebih moden adalah menggunakan kotak semak tersembunyi dan kombinasi label, yang boleh menyokong penutup penutup topeng, peralihan animasi dan kesan lain.

 <input type = "checkbox" id = "modal-toggle" tersembunyi>
<label untuk = "modal-toggle" class = "modal-trigger"> Buka tetingkap pop timbul </label>

<div class = "modal">
  <label untuk = "modal-toggle"> tutup </label>
  <div class = "modal-content">
    <p> ini kandungan </p>
  </div>
</div>

Logik paparan kawalan CSS:

 .modal {
  Paparan: Tiada;
}

#modal-toggle: diperiksa ~ .modal {
  paparan: blok;
}

Kaedah ini lebih mudah dan mudah diklik untuk menutup dengan lapisan animasi dan topeng.

Nota dan cadangan pengoptimuman

• Keserasian dan pengalaman : Penyelesaian CSS tulen, sementara ringan, mungkin tidak disokong sepenuhnya pada pelayar yang lebih tua (seperti IE), atau mungkin kekurangan animasi peralihan.
• Kebolehcapaian (A11Y) : Menambah aria-label atau role="dialog" dapat membantu pembaca skrin mengenali kandungan pop timbul.
• Klik Mask untuk Tutup : Jika anda ingin mengklik Mask untuk menutup tetingkap pop timbul, anda boleh menggunakan label untuk menutup seluruh lapisan topeng dan mengikatnya ke kotak semak.
• Mencegah Latar Belakang Menatal : Apabila tetingkap pop timbul dipaparkan, menambah overflow: hidden ke badan boleh menghalang kandungan di belakangnya dari menatal.

Mari kita meringkaskan

Inti menggunakan CSS untuk membuat tetingkap modal atau kotak cahaya adalah untuk mengawal kaedah penukaran status paparan. Kaedah :target sesuai untuk pelaksanaan cepat, manakala label kotak semak lebih sesuai untuk senario kompleks. Walaupun kaedah ini tidak sepenuhnya menggantikan fleksibiliti JS, mereka cukup untuk halaman statik atau projek ringan.

Pada asasnya, itu tidak sukar untuk dilaksanakan, tetapi beberapa butiran mudah diabaikan, seperti kedudukan butang dekat, julat tindak balas lapisan topeng, dan masalah penyesuaian terminal mudah alih.

Atas ialah kandungan terperinci Membuat tingkap modal atau kotak cahaya dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!