首頁  >  文章  >  web前端  >  基於jQuery實作帶動畫效果超酷的彈出對話框(附源碼下載)_jquery

基於jQuery實作帶動畫效果超酷的彈出對話框(附源碼下載)_jquery

WBOY
WBOY原創
2016-05-16 15:14:131520瀏覽

這是一款基於jQuery的彈出對話框插件,這個jQuery對話框插件的最大特點是彈出和關閉都帶有非常酷炫的動畫特效,例如旋轉飛入、上下抖動飛入等。效果圖如下:


效果示範     原始碼下載

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>

以上所述是小編給大家介紹的基於jQuery實現帶動畫效果超炫酷的彈出對話框(附源碼下載),希望對大家有所幫助!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn