Bagaimana untuk Mencipta Popup Mudah dengan jQuery?

Mencipta Pop Timbul Mudah dengan jQuery

Banyak aplikasi web memerlukan keupayaan untuk memaparkan maklumat tambahan atau membenarkan input pengguna tanpa meninggalkan halaman semasa. Penyelesaian biasa untuk ini ialah menggunakan tetingkap pop timbul. Dalam artikel ini, kami akan meneroka cara mencipta pop timbul mudah menggunakan jQuery.

Menyesuaikan Rupa

Untuk menyesuaikan penampilan pop timbul, laraskan CSS berikut:

a.dipilih {
warna latar belakang:#1F75CC;
color:white;
z-index:100;
}

.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor :default;
paparan:tiada;
margin atas: 15px;
kedudukan:mutlak;
text-align:left;
lebar:394px;
z-index:50;
padding: 25px 25px 20px;
}

label {
paparan: blok;
margin-bawah: 3px;
padding-left: 15px;
text-indent: -15px;
}

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

Implementasi jQuery

Seterusnya, laksanakan kod jQuery:

fungsi nyahpilih(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(meringankan, panggil balik) {
return this.animate({ opacity: ' togol', ketinggian: 'togol' }, 'cepat', pelonggaran, panggil balik);
};

Struktur HTML

Akhir sekali, tambah struktur HTML untuk memaparkan pop timbul:

< ;bentuk method="post">

<p><label for="email">Your email or name</label><input type="text" size="30" name="email">

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