Bagaimana untuk Mencipta Dialog Popup Mudah Menggunakan jQuery?

Mencipta Dialog Pop Timbul dengan jQuery

Dalam reka bentuk web, tetingkap timbul sering digunakan untuk memaparkan maklumat tambahan atau mengumpulkan input pengguna. Artikel ini menyediakan panduan langkah demi langkah tentang cara menjana tetingkap timbul mudah menggunakan jQuery.

Struktur HTML

Pertama, cipta elemen HTML yang akan mencetuskan tetingkap pop timbul apabila mengklik. Dalam contoh ini, kami menggunakan div dengan ID bernama "mel".

<div>
<p>Seterusnya, buat tetingkap timbul itu sendiri. Ini boleh diletakkan di mana-mana dalam dokumen. Ia harus mengandungi label dengan teks "e-mel" dan medan input teks.</p>
<pre class="brush:php;toolbar:false"><div class="messagepop pop">
  <form>
    <p><label for="email">Email</label><input type="text" name="email"></p>
<p><strong>Penggayaan CSS</strong></p>
<p>Gunakan gaya untuk menyesuaikan penampilan tetingkap timbul dan elemennya.</p>
<pre class="brush:php;toolbar:false">.messagepop {
  background-color: #FFFFFF;
  border: 1px solid #999999;
  padding: 25px;
  display: none;
}

label {
  display: block;
  margin-bottom: 3px;
}

jQuery Skrip

Akhir sekali, gunakan jQuery untuk mengawal gelagat tetingkap timbul. Tambahkan pengendali acara klik pada elemen pencetus dan butang tutup, dan gunakan fungsi slideFadeToggle() untuk menghidupkan tetingkap pop timbul.

$(function() {
  $('#mail').on('click', function() {
    $('.messagepop').slideFadeToggle();
  });

  $('.close').on('click', function() {
    $('.messagepop').slideFadeToggle();
    return false;
  });
});

Pertimbangan Tambahan

Bergantung pada aplikasi, anda mungkin perlu memuatkan kandungan pop timbul secara dinamik menggunakan panggilan Ajax. Laraskan HTML dan JavaScript dengan sewajarnya.

Dengan mengikuti langkah-langkah ini, anda boleh melaksanakan tetingkap timbul mudah menggunakan jQuery. Sesuaikan penampilan dan kefungsian untuk memenuhi keperluan khusus halaman web anda.