Bagaimana untuk Mencipta Tetingkap Popup Mudah dengan jQuery dan CSS?

Cara Memaparkan Tetingkap Pop Timbul Mudah dengan jQuery

Dalam pembangunan web, memaparkan pop timbul boleh meningkatkan interaktiviti pengguna. Dalam artikel ini, kami akan meneroka cara mencipta tetingkap timbul mudah yang mengandungi label dan medan input menggunakan jQuery.

Masalah:

Pertimbangkan situasi yang anda mahukan untuk memaparkan tetingkap pop timbul apabila mengklik elemen dengan ID "mel." Pop timbul ini harus mengandungi label dengan teks "e-mel" dan kotak teks yang sepadan.

Penyelesaian:

Untuk mencipta tetingkap timbul mudah menggunakan jQuery, kami akan menggabungkan CSS dan JavaScript. Mari kita pecahkan:

CSS:

Mula-mula, mari kita tentukan gaya CSS untuk pop timbul:

.pop {
//... CSS code here...
}

JavaScript:

Seterusnya, kami akan mencipta jQuery fungsi:

$("#contact").on('click', function() {
    //... jQuery code here...
});

HTML:

Akhir sekali, kita perlu mentakrifkan penanda HTML untuk pop timbul dan elemen yang mencetuskannya:

<div> <p><strong>Pertimbangan Tambahan:</strong></p>
<p>Untuk pengguna yang dipertingkatkan pengalaman, anda boleh memasukkan animasi pada pop timbul. Selain itu, jika kandungan pop timbul adalah berat, pertimbangkan untuk memuatkannya melalui AJAX untuk meminimumkan kependaman.</p>
<p><strong>Contoh Pelaksanaan:</strong></p>
<p>Di bawah ialah contoh lengkap pelaksanaan penyelesaian disediakan:</p>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.pop {
  display: none;
  position: absolute;
  z-index: 1000;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
}

JavaScript:

$("#contact").on('click', function() {
  $(".pop").toggle();
});

HTML:

<div><p>Pelaksanaan ini membolehkan tetingkap pop timbul yang mudah dan responsif dipaparkan pada klik daripada pautan "Hubungi Kami".</p></div>