基于jQuery實現(xiàn)帶動畫效果超炫酷的彈出對話框(附源碼下載)
更新時間：2016年02月22日 14:26:55 作者：愛上程序猿
這是一款基于jQuery的彈出對話框插件，這個jQuery對話框插件的最大特點是彈出和關(guān)閉都帶有非常炫酷的動畫特效,需要的朋友參考下吧
這是一款基于jQuery的彈出對話框插件，這個jQuery對話框插件的最大特點是彈出和關(guān)閉都帶有非常炫酷的動畫特效，比如旋轉(zhuǎn)飛入、上下抖動飛入等。效果圖如下：
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("腳本之家", m.fzitv.net, {
title: "Prompt Dialog Box",
required: true,
animateIn : "rollIn",
animateOut: "rollOut"
});
});
$('.demo-3').click(function(){
$.gDialog.confirm("Are You Sure?", {
title: "Confirm Dialog Box",
animateIn : "bounceInDown",
animateOut: "bounceOutUp"
});
});
</script>
以上所述是小編給大家介紹的基于jQuery實現(xiàn)帶動畫效果超炫酷的彈出對話框(附源碼下載)，希望對大家有所幫助！
您可能感興趣的文章:
- jQuery代碼實現(xiàn)對話框右上角菜單帶關(guān)閉×
- jQuery實現(xiàn)時尚漂亮的彈出式對話框?qū)嵗?/a>
- jquery插件hiAlert實現(xiàn)網(wǎng)頁對話框美化
- JQuery彈出炫麗對話框的同時讓背景變灰色
- jQuery實現(xiàn)單擊按鈕遮罩彈出對話框(仿天貓的刪除對話框)
- Jquery EasyUI中彈出確認對話框以及加載效果示例代碼
- jquery刪除提示框彈出是否刪除對話框
- jQuery Mobile的loading對話框顯示/隱藏方法分享
- JQuery制作的放大效果的popup對話框(未添加任何jquery plugin)分享
- Jquery實現(xiàn)頁面加載時彈出對話框代碼
- 6款經(jīng)典實用的jQuery小插件及源碼(對話框/提示工具等等)
- jQuery Dialog對話框事件用法實例分析
- jquery實現(xiàn)點擊彈出可放大居中及關(guān)閉的對話框(附demo源碼下載)
相關(guān)文章
本文給大家分享的是使用原生JS和JQ兩種方法分別實現(xiàn)相同的圖片輪播特效，十分的實用，也非常方便大家對比學(xué)習(xí)原生js和jQuery，有需要的小伙伴可以參考下。2015-04-04
斑馬線其實就是隔行換色效果。2009-05-05
jQuery插件FusionCharts實現(xiàn)的MSBar3D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的MSBar3D圖效果,結(jié)合完整實例形式分析了jQuery使用FusionCharts載入xml數(shù)據(jù)繪制MSBar3D圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery中使用setInterval函數(shù)設(shè)置定時任務(wù),并通過clearInterval函數(shù)來清除這些任務(wù),從而避免資源浪費或邏輯混亂,具有一定的參考價值,感興趣的可以了解一下2024-09-09
jquery中$.fn和圖片滾動效果實現(xiàn)的必備知識總結(jié)
圖片滾動效果相信大家都使用過，看上去很簡單的一個效果，如果想熟練的掌握必須知道jquery、IIFE、setInterval等基礎(chǔ)以及$.fn用法，下面這篇文章主要介紹了關(guān)于jquery中$.fn和圖片滾動效果制作的必備知識，需要的朋友可以參考下。2017-04-04
本文給大家分享一款貼近用戶體驗的Jquery日期、時間選擇插件，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery實現(xiàn)查找最近父節(jié)點的方法,涉及jQuery針對元素節(jié)點操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實例形式詳細分析了jQuery選擇器的基本功能、使用方法及操作注意事項,需要的朋友可以參考下2020-01-01
本文給大家分享的是小編jQuery、zepto、js常用小技巧的心得，非常實用，有需要的小伙伴可以參考下2017-02-02
jQuery Ajax 實現(xiàn)分頁 kkpager插件實例代碼
本文通過實例代碼給大家講解了jQuery Ajax 實現(xiàn)分頁 kkpager插件功能，需要的的朋友參考下吧2017-08-08