jquery pop timbul tutup

Apabila kami menggunakan pemalam pop timbul jQuery dalam halaman web, kami biasanya perlu menyediakan fungsi penutup supaya pengguna boleh menutup pop timbul apabila diperlukan. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan fungsi penutupan kotak pop timbul.

Langkah 1: Tambahkan butang tutup

Tambahkan butang tutup pada halaman timbul, iaitu elemen HTML, seperti butang atau pautan. Contohnya:

<a href="#" class="close-btn">关闭</a>

Di sini kami menggunakan elemen pautan dengan nama kelas "close-btn" dan menetapkan atribut href pautan kepada "#" supaya ia tidak melompat ke halaman lain. Anda juga boleh menggunakan elemen HTML lain, seperti elemen butang, dengan menetapkan nama kelas kepada "close-btn".

Langkah 2: Ikat acara tutup

Sekarang kita perlu menggunakan jQuery untuk memilih elemen butang dan mengikat acara klik untuk menutup kotak timbul apabila pengguna mengklik butang. Contohnya:

$('.close-btn').click(function() {
  // 关闭弹框的代码
});

Di sini kita menggunakan fungsi $() untuk memilih elemen dengan nama kelas "close-btn", dan kemudian gunakan kaedah click() untuk mengikat acara klik. Dalam fungsi panggil balik acara klik, kita perlu melaksanakan kod untuk menutup kotak pop timbul.

Langkah 3: Tutup kotak pop timbul

Sekarang kita telah mengikat acara tutup, langkah seterusnya ialah melaksanakan kod penutup kotak pop timbul sebenar. Khususnya, kita perlu menggunakan jQuery untuk memilih elemen pop timbul dan menyembunyikannya. Contohnya:

$('.close-btn').click(function() {
  // 隐藏弹框
  $('.dialog').hide();
});

Di sini kami memilih elemen dengan nama kelas "dialog" dan menyembunyikannya menggunakan kaedah hide(). Anda boleh menggunakan kaedah lain, seperti fadeOut() atau animate(), untuk mencapai kesan animasi penutup yang berbeza.

Kod lengkap adalah seperti berikut:

  
  
  


  显示弹框
  
  

    
这是一个弹框
    
这是弹框的内容。
    <a href="#" class="close-btn">关闭</a>
  
  
  
  <script>
    $('.show-btn').click(function() {
      $('.dialog').show();
    });
    
    $('.close-btn').click(function() {
      $('.dialog').hide();
    });
  </script>

Dalam contoh ini, kami menggunakan elemen butang sebagai butang untuk memaparkan kotak timbul. Apabila pengguna mengklik butang, pop timbul akan muncul dengan butang tutup. Apabila pengguna mengklik butang tutup, pop timbul akan disembunyikan.

Kesimpulan

Dalam artikel ini, kami mempelajari cara menggunakan jQuery untuk melaksanakan fungsi penutup pop timbul. Dengan menambahkan butang tutup dan mengikat acara tutup, kami boleh mencapai pengalaman pop timbul yang mesra pengguna. Apabila anda menulis pemalam pop timbul untuk tapak web atau aplikasi anda, ingat untuk mempertimbangkan untuk menambah fungsi penutup untuk meningkatkan kepuasan pengguna.

Atas ialah kandungan terperinci jquery pop timbul tutup. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!