Mencipta Pop Timbul Mudah dengan jQuery

Apabila mereka bentuk halaman web, anda mungkin menghadapi situasi di mana anda ingin memaparkan maklumat atau kandungan tambahan dalam tetingkap timbul berasingan apabila tindakan pengguna tertentu. Artikel ini akan membimbing anda melalui proses mencipta pop timbul mudah menggunakan jQuery, memfokuskan pada memaparkan kotak teks e-mel berlabel.

Langkah 1: Penggayaan CSS

Pertama, tentukan gaya CSS untuk menyesuaikan penampilan pop timbul.

a.selected {
  background-color: #1F75CC;
  color: white;
  z-index: 100;
}

.messagepop {
  background-color: #FFFFFF;
  border: 1px solid #999999;
  cursor: default;
  display: none;
  margin-top: 15px;
  position: absolute;
  text-align: left;
  width: 394px;
  z-index: 50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

CSS ini mentakrifkan gaya untuk elemen pop timbul, elemen terpaut yang mencetuskan elemen pop timbul, label dan perenggan dalam pop timbul.

Langkah 2: Kefungsian JavaScript

Seterusnya, cipta fungsi JavaScript untuk mengendalikan gelagat pop timbul:

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#contact').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

• nyahpilih(): Fungsi ini menutup pop timbul dan mengalih keluar keadaan yang dipilih daripada elemen yang dipautkan.
• $('#contact').on('click', ...): Pengendali acara ini menogol keterlihatan pop timbul apabila elemen dengan ID daripada 'kenalan' diklik.
• $('.close').on('click', ...): Pengendali acara ini menutup pop timbul apabila elemen 'close' berada diklik.
• $.fn.slideFadeToggle: Fungsi tersuai ini memudar dengan lancar dan menogol keterlihatan pop timbul.

Langkah 3: Struktur HTML

Akhir sekali, tentukan struktur HTML untuk pop timbul dan yang dipautkan elemen:

<div class="messagepop pop">
  <form method="post">

HTML ini mentakrifkan kandungan pop timbul, termasuk borang dengan input e-mel dan kawasan teks mesej, serta elemen yang dipautkan dengan ID 'kenalan'.

Dengan menggabungkan langkah-langkah ini, anda boleh mencipta pop timbul mudah yang muncul apabila pautan 'Hubungi Kami' diklik dan mengandungi kotak teks e-mel berlabel. Teknik ini boleh disesuaikan dan disesuaikan dengan mudah untuk memenuhi keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Popup jQuery Mudah dengan Kotak Teks E-mel Berlabel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!