jquery ditutup secara automatik selepas muncul

Dalam halaman web, jquery ialah perpustakaan javascript yang digunakan secara meluas yang boleh mencapai pelbagai interaksi dan kesan animasi dengan mudah. Antaranya, kotak pop timbul ialah kaedah interaksi biasa, yang boleh membimbing pengguna untuk melakukan operasi atau menggesa pengguna dengan maklumat yang berkaitan. Dalam keadaan biasa, kotak pop timbul perlu ditutup secara manual, tetapi dalam beberapa senario, kita perlu mencapai kesan penutupan automatik Artikel ini akan memperkenalkan cara menggunakan jquery untuk merealisasikan fungsi penutupan automatik kotak pop timbul.

1. Pelaksanaan asas kotak timbul

Dalam jquery, kita boleh menggunakan pemalam kotak timbul atau menulis kod sendiri untuk mencapai kesan kotak timbul. Di sini kami mengambil cara menulis kod sendiri sebagai contoh untuk mencapai kesan kotak pop timbul.

Kod HTML

<button id="btn">点击弹出框</button>

<div class="mask">
  <div class="popup">
    <h3>弹出框标题</h3>
    <p>弹出框内容</p>
    <button class="close-btn">关闭</button>
  </div>
</div>

Kod CSS

.mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6)
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  text-align: center;
}

.close-btn {
  margin-top: 20px;
  padding: 5px 10px;
  border: none;
  background-color: #ff6700;
  color: #ffffff;
  border-radius: 5px;
  cursor: pointer;
}

Kod JS

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

Dengan kod di atas, kita boleh mencapai kesan kotak pop timbul yang mudah. Klik butang, latar belakang lut sinar hitam akan muncul pada halaman dan bingkai putih akan muncul Klik butang tutup, dan bingkai timbul akan hilang. Seterusnya, kami akan memperkenalkan cara melaksanakan fungsi penutupan automatik kotak pop timbul.

2. Gunakan setTimeout untuk mencapai penutupan automatik

Dalam jquery, terdapat kaedah setTimeout yang membolehkan kod dilaksanakan secara automatik selepas masa yang ditetapkan. Menggunakan kaedah ini, kita boleh merealisasikan fungsi menutup kotak pop timbul secara automatik.

Kod HTML (sama seperti di atas)

Kod CSS (sama seperti di atas)

Kod JS

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);

    // 代码开始执行后，1.5秒后执行自动关闭
    setTimeout(function() {
      $('.mask').fadeOut(500);
    }, 1500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

Dalam kod di atas, Selepas pop- up box dipaparkan (elemen topeng fadeIn), kami menetapkan pemasa dan meletakkan kod penutup automatik ke dalam pemasa, di mana 1500 bermakna kod penutup automatik akan dilaksanakan selepas 1.5 saat (elemen topeng fadeOut). Sudah tentu, kita juga boleh menetapkan masa lebih lama atau lebih pendek untuk memenuhi keperluan yang berbeza.

3. Gunakan animasi animasi untuk mencapai penutupan automatik

Selain menggunakan kaedah setTimeout untuk mencapai penutupan automatik, kami juga boleh menggunakan kesan animasi jquery untuk mencapai kesan yang serupa. Kita boleh menggunakan kaedah animasi jquery untuk menghilangkan kotak pop timbul secara beransur-ansur, dengan itu mencapai kesan yang serupa dengan penutupan automatik.

Kod HTML (sama seperti di atas)

Kod CSS (sama seperti di atas)

Kod JS

$(function() {
  $('#btn').click(function() {
    $('.mask').fadeIn(500);

    // 延迟1.5秒后开始执行动画
    setTimeout(function() {
      $('.popup').animate({opacity: 0});
      $('.mask').animate({opacity: 0}, function() {
        $(this).hide();
      })
    }, 1500);
  });
  
  $('.close-btn').click(function() {
    $('.mask').fadeOut(500);
  });
})

Dalam kod di atas, Kami juga menetapkan pemasa supaya kotak pop timbul mula hilang selepas 1.5 saat. Kehilangan di sini bukan untuk menggunakan kaedah fadeOut secara langsung, tetapi menggunakan kaedah animasi untuk menukar atribut kelegapan (transparensi) secara beransur-ansur daripada 1 kepada 0. Apabila ketelusan menjadi 0, fungsi panggil balik dipanggil untuk menyembunyikan elemen topeng. Ini melengkapkan kesan yang serupa dengan penutupan automatik.

Ringkasan

Artikel ini memperkenalkan cara menggunakan jquery untuk merealisasikan fungsi penutupan automatik kotak pop timbul. Kita boleh menggunakan kaedah setTimeout atau kaedah animasi untuk mencapai kesan penutupan automatik. Semoga artikel ini bermanfaat kepada semua.

Atas ialah kandungan terperinci jquery ditutup secara automatik selepas muncul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!