基于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("腳本之家", www.dbjr.com.cn, { 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中彈出確認(rèn)對話框以及加載效果示例代碼
- 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)文章
juqery 學(xué)習(xí)之三 選擇器 可見性 元素屬性
juqery 學(xué)習(xí)之三 選擇器 可見性 元素屬性,需要的朋友可以參考下。2010-11-11