Bagaimana untuk membuat tetingkap modal animasi CSS sahaja?

Gunakan kotak semak tersembunyi dan: diperiksa kelas pseudo untuk mengawal status kotak modal; 2. Klik untuk membuka dan menutup melalui persatuan label; 3. Gunakan peralihan CSS atau @keyframes untuk mencapai animasi zoom yang pudar; 4. Tetapkan penunjuk-events untuk memastikan bahawa mengklik topeng boleh ditutup; 5. Kunci ESC tidak boleh ditutup dalam CSS tulen. Kaedah ini tidak memerlukan JavaScript, ringan dan serasi dengan pelayar moden, dan sesuai untuk projek mudah atau tujuan pembelajaran.

Mewujudkan tetingkap modal animasi CSS hanya boleh dilakukan dengan hanya menggunakan HTML dan CSS-NO JavaScript diperlukan. Caranya terletak pada menggunakan :target atau kotak semak dengan :checked untuk mengawal penglihatan, digabungkan dengan peralihan CSS atau animasi untuk kesan lancar.

Inilah cara membina satu langkah demi langkah:

✅ 1. Gunakan hack kotak semak atau :target untuk togol kawalan

Oleh kerana kita tidak boleh menggunakan JavaScript, kita memerlukan cara untuk "ingat" keadaan modal. Dua kaedah biasa:

• :target - Menggunakan Pengenal Serpihan URL (misalnya, #modal )
• Hack kotak semak - menyembunyikan kotak semak dan gaya :checked

Kami akan menggunakan kaedah kotak semak kerana ia membolehkan tingkah laku klik klik yang lebih lancar dan kawalan yang lebih baik.

Struktur HTML:

 <!-kotak semak tersembunyi untuk mengawal keadaan modal->
<input type = "checkbox" id = "modal-toggle" class = "modal-toggle">
<label untuk = "modal-toggle" class = "modal-open-btn"> buka modal </label>

<!-modal->
<div class = "modal">
  <label untuk = "modal-toggle" class = "modal-overlay"> </label>
  <div class = "modal-content">
    <label untuk = "modal-toggle" class = "modal-close"> & times; </label>
    <h2> Tajuk modal </h2>
    <p> Ini adalah kandungan modal animasi anda. </P>
  </div>
</div>

Kotak semak bertindak sebagai togol. Mengklik label ( modal-open-btn ) atau elemen tutup togol kotak semak, yang kami gaya kondisi.

✅ 2. Gaya modal dengan animasi CSS

Sekarang gunakan gaya untuk menjadikannya animasi dan menarik secara visual.

CSS Teras:

 / * Menyembunyikan kotak semak */
.modal-toggle {
  Paparan: Tiada;
}

/ * Asas modal: tersembunyi secara lalai */
.modal {
  Kelegapan: 0;
  Keterlihatan: Tersembunyi;
  Kedudukan: Tetap;
  Atas: 0;
  Kiri: 0;
  Lebar: 100%;
  Ketinggian: 100%;
  Pointer-events: Tiada;
  Peralihan: Kelegapan 0.3s mudah;
}

/ * Overlay modal (latar belakang redup) */
.modal-overlay {
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 0;
  Lebar: 100%;
  Ketinggian: 100%;
  latar belakang warna: RGBA (0, 0, 0, 0.5);
}

/ * Kotak kandungan modal */
.modal-content {
  Kedudukan: Mutlak;
  Atas: 50%;
  Kiri: 50%;
  Transform: Terjemahan (-50%, -50%) skala (0.8);
  lebar: 90%;
  Max-Width: 500px;
  Latar Belakang: Putih;
  Padding: 30px;
  Radius sempadan: 10px;
  Box-shadow: 0 4px 20px RGBA (0,0,0,0.2);
  Peralihan: Transformasi 0.3s mudah;
}

/ * Butang tutup */
.modal-close {
  Kedudukan: Mutlak;
  Atas: 10px;
  Kanan: 15px;
  saiz font: 28px;
  kursor: penunjuk;
  Warna: #AAA;
}

.Modal-Close: Hover {
  Warna: #000;
}

/ * Tunjukkan modal apabila kotak semak diperiksa */
.modal-toggle: diperiksa .modal {
  Kelegapan: 1;
  Keterlihatan: kelihatan;
  Pointer-events: Auto;
}

.modal-toggle: diperiksa .modal .modal-content {
  Transform: Terjemahan (-50%, -50%) skala (1);
}

The pointer-events: none pada modal dan pointer-events: auto When Active Secure Clicks pada Overlay menutup modal (melalui label).

✅ 3. Tambahkan Animasi Masuk dan Keluar

Mahukan lebih banyak bakat? Ganti transition dengan animasi @keyframes penuh.

Contoh: animasi pudar & skala

 @KeyFrames Modal-in {
  0% {
    Kelegapan: 0;
    Transform: Terjemahan (-50%, -50%) skala (0.7);
  }
  100% {
    Kelegapan: 1;
    Transform: Terjemahan (-50%, -50%) skala (1);
  }
}

@KeyFrames modal-out {
  0% {
    Kelegapan: 1;
    Transform: Terjemahan (-50%, -50%) skala (1);
  }
  100% {
    Kelegapan: 0;
    Transform: Terjemahan (-50%, -50%) skala (0.8);
  }
}

/ * Sapukan animasi hanya semasa membuka */
.modal-toggle: diperiksa .modal .modal-content {
  Animasi: Modal-in 0.3s ke hadapan;
}

/ * Pilihan: Animate out - rumit tanpa js, tetapi berfungsi dengan dekat jika anda membalikkan */
.modal-content {
  Animasi: Tiada;
}

NOTA: Oleh kerana CSS tidak dapat membalikkan animasi dengan mudah pada tidak jelas, menggunakan transition sering lebih lancar daripada cuba menghidupkan penutupan.

✅ 4. Pilihan: Tutup Onlay atau ESC (separa)

• Overlay klik : sudah dikendalikan melalui <label for="modal-toggle" class="modal-overlay"></label>
• Kunci ESC : Tidak boleh dikendalikan dalam CSS tulen. Anda memerlukan JS untuk sokongan papan kekunci.

✅ Ringkasan: Mata Utama

• Gunakan kotak semak tersembunyi dan :checked untuk mensimulasikan keadaan.
• Gunakan elemen label untuk mencetuskan terbuka/tutup.
• Animate dengan transition atau @keyframes .
• Gunakan pointer-events untuk mengawal tingkah laku klik pada latar belakang.
• Tiada sokongan papan kekunci (ESC) tanpa JavaScript.

Kaedah ini ringan, boleh diakses untuk kegunaan asas, dan berfungsi di seluruh pelayar moden. Ia sesuai untuk projek mudah atau belajar logik CSS.

Pada dasarnya hanya menghubungkan kotak semak ke label dan menghidupkan penampilan. Bukan sihir -hanya CSS pintar.

Atas ialah kandungan terperinci Bagaimana untuk membuat tetingkap modal animasi CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!