Bagaimana untuk membuat tetingkap pop timbul jquery

<p>jQuery ialah perpustakaan JavaScript yang pantas dan ringkas yang memudahkan traversal dan manipulasi dokumen HTML, pengendalian acara, reka bentuk animasi dan interaksi Ajax. Dalam pembangunan web, tetingkap timbul ialah kaedah interaksi biasa. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencipta tetingkap pop timbul.

<p>Pertama, kami perlu memperkenalkan pautan CDN perpustakaan jQuery dalam fail HTML:

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<p>Seterusnya, kami mencipta bahagian HTML yang mengandungi kandungan pop timbul:

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Hello World!</p>
  </div>
</div>

<p>Di sini, elemen <div> menentukan bekas tetingkap timbul dengan ID myModal dan nama kelas modal elemen <div> mengandungi bekas lain dengan nama kelas modal-content, yang digunakan untuk memaparkan kandungan tetingkap pop timbul; Elemen <span> menentukan ikon garpu dengan nama kelas close, yang digunakan untuk menutup tetingkap pop timbul mengandungi teks kandungan yang ingin kami paparkan dalam tetingkap pop timbul. <p>

Seterusnya, kita perlu menulis kod JavaScript untuk melaksanakan tetingkap timbul: <p>

// 获取弹窗元素
var modal = document.getElementById('myModal');

// 获取叉子图标元素
var closeBtn = document.getElementsByClassName('close')[0];

// 当叉子图标被点击时，关闭弹窗
closeBtn.onclick = function() {
  modal.style.display = "none";
}

// 当用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// 当按钮被点击时，显示弹窗
$('#myButton').click(function() {
  modal.style.display = "block";
});

Di sini, kita mula-mula mendapatkan elemen tetingkap timbul dan elemen ikon garpu. Kemudian, apabila ikon garpu diklik, kami menggunakan acara <p> untuk menetapkan atribut paparan tetingkap timbul kepada onclick untuk menutup tetingkap timbul. Seterusnya, kami menggunakan acara none objek window untuk mendengar peristiwa klik pengguna di bahagian lain tetingkap supaya tetingkap timbul boleh ditutup apabila pengguna mengklik kawasan di luar tetingkap timbul. onlick

Akhir sekali, kami mendengar peristiwa klik butang dan menggunakan jQuery untuk menetapkan sifat paparan tetingkap timbul kepada <p> untuk memaparkan tetingkap timbul apabila diklik. Di sini kami menggunakan kaedah block jQuery untuk mendaftarkan acara klik. click()

Menggunakan kod di atas, kami kini telah mencipta contoh pop timbul jQuery asas. Dalam projek sebenar, anda boleh menyesuaikan tetingkap timbul melalui gaya dan kod JavaScript untuk memenuhi keperluan yang berbeza. <p>

Ringkasan: <p>

jQuery ialah perpustakaan JavaScript popular yang boleh digunakan untuk memudahkan traversal dan manipulasi dokumen HTML, pengendalian acara, reka bentuk animasi dan interaksi Ajax. Anda boleh membuat tetingkap pop timbul dengan mudah menggunakan jQuery, dan anda boleh menyesuaikan gaya dan kefungsian tetingkap timbul mengikut keperluan. Dalam projek sebenar, anda boleh menggunakan jQuery untuk mencapai pengalaman interaksi pengguna yang lebih maju. <p>

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