Rumah > hujung hadapan web > tutorial js > Melaksanakan dialog pop timbul yang menarik dengan kesan animasi berdasarkan jQuery (dengan muat turun kod sumber)_jquery

Melaksanakan dialog pop timbul yang menarik dengan kesan animasi berdasarkan jQuery (dengan muat turun kod sumber)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 15:14:13
asal
1740 orang telah melayarinya

Ini ialah pemalam dialog pop timbul berdasarkan jQuery Ciri terbesar pemalam dialog jQuery ini ialah kedua-dua pop timbul dan penutup mempunyai kesan animasi yang sangat hebat, seperti berputar dan terbang masuk, ke atas dan. turun gelisah dan terbang masuk, dsb. Paparannya adalah seperti berikut:


Demonstrasi kesan  Muat turun kod sumber

kod html:

<div class="container">
<h1>jQuery gDialog Plugin Exampels</h1>
<button class="btn demo-1">Alert Dialog Box</button>
<button class="btn demo-2">Prompt Dialog Box</button>
<button class="btn demo-3">Prompt Dialog Box</button>
</div>
<script src="src/jquery.js"></script>
<script src="src/jquery.gDialog.js"></script>
<script>
$('.demo-1').click(function(){
$.gDialog.alert("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero erat, scelerisque sit amet dolor nec, euismod feugiat massa.", {
title: "Alert Dialog Box",
animateIn: "bounceIn",
animateOut: "bounceOut"
});
}); 
$('.demo-2').click(function(){
$.gDialog.prompt("脚本之家", <a href="http://www.jb51.net">www.jb51.net</a>, {
title: "Prompt Dialog Box",
required: true,
animateIn : "rollIn",
animateOut: "rollOut"
});
}); 
$('.demo-3').click(function(){
$.gDialog.confirm("Are You Sure&#63;", {
title: "Confirm Dialog Box",
animateIn : "bounceInDown",
animateOut: "bounceOutUp"
});
}); 
</script>
Salin selepas log masuk

Di atas ialah kotak dialog pop timbul dengan kesan animasi berdasarkan jQuery yang diperkenalkan oleh editor (termasuk muat turun kod sumber).

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan