Buat Windows Pop-Up Dinamik: CSS dan JavaScript untuk mencapai kesan peralihan yang lancar

Artikel ini memperincikan cara menggunakan HTML, CSS dan JavaScript untuk membuat tingkap pop-up dinamik dengan kesan animasi peralihan yang lancar. Tutorial ini akan pergi dari struktur pembinaan, definisi gaya untuk logik interaksi, langkah demi langkah membimbing pembaca untuk melaksanakan lapisan pop timbul dengan zum dan kesan pudar yang muncul selepas mengklik butang kenalan, dan menyediakan contoh kod lengkap dan langkah berjaga-jaga.

Dalam reka bentuk web moden, tingkap pop timbul adalah komponen biasa untuk interaksi pengguna dan paparan maklumat. Tetingkap pop timbul yang direka dengan baik dengan animasi yang lancar dapat meningkatkan pengalaman pengguna dengan ketara. Tutorial ini akan membimbing anda bagaimana untuk menggabungkan HTML, CSS dan JavaScript untuk membina tetingkap pop-up dinamik dengan kesan animasi lancar dan zum.

1. Struktur HTML: Menentukan tingkap dan pencetus pop timbul

Pertama, kita perlu membina struktur HTML asas tetingkap popup. Tingkap popup biasa terdiri daripada latar belakang lut (overlay) yang meliputi keseluruhan viewport dan bekas kandungan berpusat. Pada masa yang sama, kami juga memerlukan butang untuk mencetuskan paparan tetingkap pop timbul.

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <tirly> Tutorial Tetingkap Pop-Up Dynamic 
    <link rel="stylesheet" href="style.css">



    
    <div class="popup">
        <div class="popup-container">
            <h1> Hubungi kami </h1>
            <p> Untuk maklumat lanjut, sila hubungi: </p>
            <p> Email: <a href="mailto:%20info@example.com"> info@example.com </a> </p>
            <p> Telefon: 073 814 8752 </p>
            <div class="popup-close"> &amp; times; </div>
        </div>
    </div>

    
    <button id="Open-Popup"> Buka tetingkap Hubungi 

    <script src="script.js"> </script>

</button></tirly>

Dalam struktur ini:

• .Popup adalah bekas untuk keseluruhan lapisan pop timbul, yang akan meliputi keseluruhan skrin dan berfungsi sebagai latar belakang separa telus.
• The .popup-container adalah kawasan yang sebenarnya memaparkan kandungan, seperti tajuk, teks, dan maklumat hubungan.
• .Popup-Close adalah butang dekat, biasanya dipaparkan sebagai simbol "×".
• #Open-Popup adalah butang yang mencetuskan paparan tetingkap popup.

2. Gaya CSS: Melaksanakan animasi dan susun atur

CSS adalah kunci untuk mencapai kesan dan animasi visual tetingkap pop-up. Kami akan menentukan keadaan tersembunyi awal tetingkap pop timbul, serta keadaan yang dipaparkan apabila diaktifkan, dan menggunakan harta peralihan CSS untuk menghasilkan kesan animasi yang lancar.

 / * style.css */

/* Reset global*/
* {
    Margin: 0;
    Padding: 0;
    saiz kotak: kotak sempadan; /* Model kotak disatukan ke dalam kotak sempadan*/
}

badan {
    Font-Family: "Raleway", Sans-Serif; /* Font sampel*/
    Paparan: Flex;
    Justify-Content: Center;
    Align-item: pusat;
    Min-ketinggian: 100VH; /* Pastikan halaman mempunyai ketinggian yang cukup*/
    latar belakang warna: #f0f0f0;
}

/* Bekas tetingkap pop timbul*/
.popup {
    Kedudukan: Tetap; /* Kedudukan tetap, meliputi keseluruhan viewport*/
    Atas: 0;
    Kiri: 0;
    Lebar: 100%;
    Ketinggian: 100%;
    Latar Belakang: RGBA (0, 0, 0, 0.6); /* latar belakang hitam lut*/
    Paparan: Flex;
    Justify-Content: Center;
    Align-item: pusat;
    Keterlihatan: Tersembunyi; /* Tersembunyi awal*/
    Kelegapan: 0; / * ketelusan awal */
    Peralihan: Kelegapan 0.3s mudah, penglihatan 0.3s mudah; /* kesan peralihan animasi*/
    Z-indeks: 1000; /* Pastikan ia berada di bahagian atas*/
}

/ * Status pengaktifan tetingkap pop timbul */
.popup.active {
    Keterlihatan: kelihatan; /* paparan*/
    Kelegapan: 1; / * benar -benar legap */
}

/* Kontena kandungan tetingkap pop timbul*/
.popup .popup-container {
    Kedudukan: Relatif; /* Kedudukan relatif untuk memudahkan kedudukan unsur dalaman*/
    Latar Belakang: #FFF; /* latar belakang putih*/
    Padding: 30px 20px;
    lebar: 400px; /* lebar tetap*/
    Max-Width: 90%; /* Pertimbangan responsif*/
    Radius sempadan: 8px; /* sudut bulat*/
    kotak bayang-bayang: 0 5px 15px rgba (0, 0, 0, 0.3); /* Kesan bayangan*/

    / * Keadaan animasi awal: sedikit dikurangkan dan telus */
    Transform: Skala (0.8);
    Kelegapan: 0;
    Peralihan: Semua 0.4S padu -bezier (0.68, -0.55, 0.27, 1.55); /* Animasi elastik*/
}

/* Animasi bekas kandungan apabila tetingkap pop timbul diaktifkan*/
.popup.active .popup-container {
    Transform: Skala (1); /* Membesarkan saiz asal*/
    Kelegapan: 1; / * benar -benar legap */
}

/*Butang tutup*/
.popup .popup-container .popup-close {
    Kedudukan: Mutlak;
    Atas: 10px;
    Kanan: 10px;
    lebar: 30px;
    Ketinggian: 30px;
    Latar Belakang: #e74C3C; /* latar belakang merah*/
    Warna: #FFF;
    Teks-Align: Pusat;
    Talian ketinggian: 30px;
    Radius sempadan: 50%; /* butang bulat*/
    saiz font: 20px;
    Font-Weight: 600;
    kursor: penunjuk; /*Legung tetikus untuk memaparkan bentuk tangan*/
    Peralihan: Latar Belakang 0.2s mudah;
}

.popup .popup-container .popup-close: hover {
    Latar Belakang: #C0392B; /* Gelap pada hover*/
}

/ * Tajuk tetingkap pop timbul */
.popup .popup-container h1 {
    Teks-Align: Pusat;
    saiz font: 28px;
    Warna: #333;
    margin-bottom: 15px;
}

/* Teks perenggan tetingkap pop timbul*/
.popup .popup-container p {
    margin-top: 10px;
    saiz font: 16px;
    Warna: #555;
    Talian ketinggian: 1.6;
}

.popup .popup-container pa {
    Warna: #007BFF;
    Teks-penyerapan: Tiada;
}

.popup .popup-container pa: hover {
    Teks-penyerapan: garis bawah;
}

/* Gaya butang mencetuskan*/
#buka-popup {
    Padding: 12px 25px;
    saiz font: 18px;
    latar belakang warna: #3498dB;
    Warna: #FFF;
    Sempadan: Tiada;
    Radius sempadan: 5px;
    kursor: penunjuk;
    Peralihan: Latar belakang warna 0.3s mudah;
}

#Open-Popup: Hover {
    latar belakang warna: #2980B9;
}

Analisis mata utama CSS:

1. .popup (lapisan masker latar belakang):

   • Kedudukan: Tetap; Atas: 0; Kiri: 0; Lebar: 100%; Ketinggian: 100%; Pastikan ia meliputi keseluruhan viewport.
   • Latar Belakang: RGBA (0, 0, 0, 0.6); mewujudkan latar belakang separa telus.
   • Keterlihatan: Tersembunyi; Kelegapan: 0; adalah keadaan tersembunyi awal tetingkap pop timbul.
   • Peralihan: Kelegapan 0.3s mudah, penglihatan 0.3s mudah; Mendefinisikan animasi lapisan latar belakang memudar masuk dan keluar. Peralihan atribut penglihatan perlu digunakan bersamaan dengan kelegapan untuk mengelakkan kandungan daripada diklik dalam keadaan tersembunyi.
   • Z-indeks: 1000; Pastikan pop timbul berada di atas kandungan lain.

2. .popup.active (keadaan pengaktifan lapisan masker latar belakang):

   • Keterlihatan: kelihatan; Kelegapan: 1; Membuat lapisan latar belakang sepenuhnya kelihatan.

3. .popup .popup-container (kontena kandungan):

   • Transform: Skala (0.8); Kelegapan: 0; adalah keadaan animasi awal kontena kandungan. Ia akan menjadi lebih kecil daripada keadaan akhir dan benar -benar telus, sesuai dengan kesan animasi "bermula dari 0 dan tumbuh lebih besar".
   • Peralihan: Semua 0.4S padu -bezier (0.68, -0.55, 0.27, 1.55); mentakrifkan animasi kontena kandungan. Fungsi padu-bezik digunakan di sini untuk membuat animasi dengan kesan "elastik" untuk menjadikan pop timbul lebih jelas. Semua bermakna bahawa semua sifat animatable akan beralih.

4. .popup.active .popup-container (status pengaktifan kontena kandungan):

   • Transform: Skala (1); Kelegapan: 1; Buat kontena kandungan membesarkan saiz normal dan dipaparkan sepenuhnya.

3. JavaScript Logic: Kawal paparan dan menyembunyikan tingkap pop timbul

JavaScript bertanggungjawab untuk mengendalikan interaksi pengguna, iaitu menunjukkan pop timbul apabila butang diklik dan menyembunyikan popup apabila butang atau latar belakang ditutup.

 // script.js

document.addeventListener ("domContentLoaded", function () {
    const OpenPOpUpButton = Document.GetElementById ("Open-Popup");
    const popup = document.QuerySelector (". Popup");
    const ClosePopUpButton = document.QuerySelector (". Popup-Close");
    const popupContainer = document.QuerySelector (". Popup-container");

    // Buka tetingkap pop timbul OpenPopUpButton.AddeventListener ("klik", fungsi () {
        popup.classlist.add ("aktif");
    });

    // Tutup tetingkap pop timbul (klik butang Tutup)
    ClosePopupButton.AddeventListener ("klik", fungsi () {
        popup.classlist.remove ("aktif");
    });

    // Tutup tetingkap pop timbul (klik pada lapisan topeng latar belakang)
    popup.addeventListener ("klik", fungsi (event) {
        // Hanya tutup apabila sasaran acara klik adalah .popup sendiri // Elakkan menutup apabila mengklik elemen dalaman popup-container if (event.target === popup) {
            popup.classlist.remove ("aktif");
        }
    });

    // Anda juga boleh menutup tetingkap pop timbul dengan menekan dokumen kunci ESC.addeventListener ("keydown", fungsi (event) {
        jika (event.key === "melarikan diri" && popup.classlist.contains ("aktif")) {
            popup.classlist.remove ("aktif");
        }
    });
});

Analisis mata utama JavaScript:

1. Dapatkan elemen DOM: Mula -mula dapatkan unsur -unsur HTML yang perlu dikendalikan melalui Document.GetElementById dan Document.QuerySelector.
2. Buka tetingkap pop timbul: Tambah pendengar acara klik untuk openpopupbutton. Tambah kelas aktif ke elemen .popup apabila butang diklik. Kelas aktif yang ditakrifkan dalam CSS akan mencetuskan paparan dan animasi tetingkap pop timbul.
3. Tutup tetingkap pop timbul (butang tutup): Tambah pendengar acara klik untuk ClosePopPbutton. Apabila butang Tutup diklik, keluarkan kelas aktif elemen .popup, dengan itu menyembunyikan tetingkap pop timbul.
4. Tutup tetingkap popup (klik pada latar belakang): Tambah pendengar acara klik untuk elemen .popup itu sendiri. Dengan memeriksa event.target === popup, pastikan tindakan penutup hanya dilakukan apabila pengguna mengklik pada latar belakang separa telus dan bukan kawasan kandungan pop timbul. Ini menghalang pengguna daripada secara tidak sengaja menutup tetingkap apabila mengklik pautan atau teks dalam tetingkap pop timbul.
5. Tutup tetingkap pop timbul (kunci ESC): Tambah pendengar acara keyboard. Apabila pengguna menekan kekunci melarikan diri dan tetingkap pop timbul diaktifkan, tutup tetingkap pop timbul untuk meningkatkan pengalaman pengguna.

4. Langkah berjaga -jaga dan pengoptimuman

• HTML Semantik: Gunakan tag HTML semantik sebanyak mungkin. Sebagai contoh, jika tetingkap pop timbul adalah borang, anda boleh menggunakan tag
  .
• Kebolehcapaian:
  • Tambah atribut aria-modal = "benar" kepada popup dan gunakan Aria-LabelledBy dan Aria-DepribedBy untuk mengaitkan tajuk dan keterangan.
  • Apabila pop timbul dibuka, bergerak fokus ke elemen yang boleh diinterakkan pertama dalam popup, dan apabila pulangan tertutup fokus kepada elemen yang mencetuskan popup.
  • Pastikan pengguna papan kekunci boleh menggunakan kekunci tab untuk menavigasi di dalam tetingkap pop timbul dan tidak dapat menavigasi di luar tetingkap pop timbul sehingga tetingkap pop timbul ditutup.
• Reka bentuk responsif: Pastikan popup memaparkan dengan baik pada saiz skrin yang berbeza. Dalam tutorial ini, kami telah menggunakan maksimum lebar: 90%; untuk melaksanakan pemprosesan responsif awal pada bekas kandungan.
• Prestasi Animasi: Cuba gunakan transformasi dan kelegapan untuk animasi, kerana ia biasanya dipercepat oleh GPU dan mempunyai prestasi yang lebih baik daripada sifat -sifat seperti atas, kiri, lebar, dan ketinggian.
• Pengurusan Z-Indeks: Pastikan nilai indeks z popup cukup tinggi supaya ia sentiasa melebihi kandungan halaman yang lain.

Meringkaskan

Dengan menggabungkan HTML, CSS, dan JavaScript, kita boleh membuat pop-up dinamik yang berfungsi dan visual yang menakjubkan. HTML menyediakan struktur, CSS bertanggungjawab untuk pengindahan dan animasi, dan JavaScript mengendalikan logik interaksi. Menguasai teknik asas ini, anda boleh menyesuaikan pelbagai komponen pop timbul yang kompleks mengikut keperluan anda, dengan itu meningkatkan pengalaman pengguna keseluruhan laman web. Ingat, semasa melaksanakan fungsi, anda juga harus memberi tumpuan kepada pengoptimuman akses dan prestasi untuk membina aplikasi web berkualiti tinggi.

Atas ialah kandungan terperinci Buat Windows Pop-Up Dinamik: CSS dan JavaScript untuk mencapai kesan peralihan yang lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!