Lumpuhkan dan hancurkan galeri imej pop timbul yang hebat

Dokumen ini terperinci bagaimana untuk melumpuhkan dan memusnahkan sepenuhnya galeri gambar popup yang indah. Dengan kod JavaScript yang mudah, anda boleh dengan mudah menutup tetingkap pop timbul semasa, keluarkan pendengar acara, dan benar -benar membuka pop timbul. Artikel ini akan memberikan contoh kod yang jelas dan arahan langkah demi langkah untuk membantu anda mengawal tingkah laku popup hebat.

Popup Magnific adalah plugin jQuery yang popular untuk mewujudkan popup dan galeri yang responsif dan indah. Walau bagaimanapun, dalam beberapa kes, anda mungkin perlu melumpuhkan atau memusnahkan sepenuhnya contoh popup yang megah, seperti selepas kemas kini kandungan dinamik, apabila keadaan halaman berubah, atau membebaskan sumber.

Lumpuhkan dan hancurkan pop timbul

Berikut adalah langkah dan contoh kod untuk melumpuhkan dan memusnahkan popup yang megah:

1. Tutup tetingkap pop timbul semasa (jika ada):

   Sekiranya terdapat tetingkap pop timbul yang indah, anda perlu menutupnya terlebih dahulu. Ini boleh dicapai dengan menggunakan kaedah $ .magNificPopup.close ().

    $ .magNificPopup.close ();

2. Keluarkan pendengar acara:

   Popup yang hebat akan mengikat beberapa pendengar acara ke unsur -unsur, seperti acara klik. Untuk menghancurkan popup yang besar, pendengar ini perlu dikeluarkan. Pendengar acara boleh dikeluarkan menggunakan kaedah .off ().

    $ ('. Thumbs'). off ('klik'); // Keluarkan pendengar acara klik pada .thumbs $ ('. Thumbs a'). Off ('klik'); // Keluarkan pendengar acara klik di .thumbs a

   Di sini, .thumbs adalah pemilih CSS elemen kontena yang mengandungi pautan imej, dan A adalah elemen pautan.

Contoh lengkap

Berikut adalah contoh lengkap yang menunjukkan cara memulakan dan memusnahkan popup yang megah:

Html:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"> </script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"> </script>

<butang jenis="butang" onclick="initMagNificPopup ()"> Mulakan popup magnifik </butang>

<div class="thumbs">
    <a href="https://picsum.photos/id/237/800.jpg" target="_ blank">
        <img src="https://picsum.photos/id/237/100.jpg" alt="image 1">
    </a>

    <a href="https://picsum.photos/id/1003/800.jpg" target="_ blank">
        <img src="https://picsum.photos/id/1003/100.jpg" alt="image 2">
    </a>

    <a href="https://picsum.photos/id/1011/800.jpg" target="_ blank">
        <img src="https://picsum.photos/id/1011/100.jpg" alt="image 3">
    </a>

    <a href="https://picsum.photos/id/1025/800.jpg" target="_ blank">
        <img src="https://picsum.photos/id/1025/100.jpg" alt="image 4">
    </a>
</div>

<butang jenis="butang" onclick="desterymagnificpopup ()"> hancurkan popup magnifik </butang>

JavaScript:

 // Inisialisasi popup yang luar biasa
fungsi initMagNificPopup () {
  $ ('. Thumbs'). MagnificPopup ({
    Jenis: 'Imej',
    Delegasikan: 'A',
    galeri: {
      Diaktifkan: Benar
    }
  });
}

// hancurkan popup yang luar biasa
fungsi destroymagnificpopup () {
  $ .magNificPopup.close ();
  $ ('. Thumbs'). off ('klik');
  $ ('. Thumbs a'). off ('klik');
}

Dalam contoh ini, kita menentukan dua fungsi: initmagnificpopup () digunakan untuk memulakan popup yang magnifik, dan destroymagnificpopup () digunakan untuk memusnahkan popup yang magnif. Anda boleh memulakan atau memusnahkan contoh popup yang megah dengan mengklik butang yang sepadan.

Perkara yang perlu diperhatikan

• Pastikan untuk menutup pop timbul sebelum memusnahkan popup yang megah untuk mengelakkan kesilapan yang berpotensi.
• Gunakan pemilih CSS yang betul untuk menghapuskan pendengar acara, pastikan untuk mengeluarkan pendengar yang berkaitan dengan pop timbul yang hebat.
• Jika konfigurasi popup hebat anda lebih kompleks, anda mungkin perlu mengeluarkan lebih banyak jenis pendengar acara.

Meringkaskan

Melalui dokumen ini, anda belajar bagaimana untuk melumpuhkan dan memusnahkan galeri gambar popup yang indah. Menguasai teknik -teknik ini dapat membantu anda mengawal tingkah laku popup yang luar biasa dan memastikan aplikasi web anda menguruskan sumber dengan cekap.

Atas ialah kandungan terperinci Lumpuhkan dan hancurkan galeri imej pop timbul yang hebat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!