Rumah  >  Artikel  >  hujung hadapan web  >  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

WBOY
WBOYasal
2016-05-16 15:14:131563semak imbas

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>

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

Kenyataan:
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
Artikel sebelumnya:Fahami enkapsulasi JavaScriptArtikel seterusnya:Fahami enkapsulasi JavaScript