今天我們要來分享一款基于jQuery的彈出層對話框插件，該插件包含多種對話框類型，比如提示框、確認框等。更為實用的是，這款jQuery對話框中的按鈕事件也可以被我們所捕獲，從而相應對話框按鈕的各種事件，用起來非常方便。

在線預覽???源碼下載

實現的代碼。

html代碼：

<center class="demo"><button onclick="payment();">繳費提示層</button><button onclick="Confirm();">確認框提示層</button><button onclick="Alert();">alert提示層</button><button class="delOrder" item_id="123">刪除商品提示層</button></center>

js代碼：

//是否繳費完成function payment() {qikoo.dialog.payNotice(function () {alert("已完成繳費按鈕"); //已繳費完成的提示}, function () {alert("你點了繳費遇到問題按鈕"); //繳費遇到問題的提示}, function () {alert("你點了關閉按鈕"); //關閉按鈕的提示 });}function Confirm() {qikoo.dialog.confirm('確定要刪除此商品嗎？', function () {alert("刪除啦！");}, function () {alert("取消啦！");});}function Alert() {qikoo.dialog.alert("站長素材 - sc.chinaz.com");}$(document).ready(function () {$(".delOrder").click(function (e) {_this = $(e.target);tips.cartTip(_this);});var tips = {cartTip: function (_this) {var tpl = ['<div class="dialog-delorder">','<div class="dialog-bar">','溫馨提示','<a href="#" οnclick="return false;" class="dialog-close" title="關閉"></a>','</div>','<div class="dialog-content">','<p>確定從購物車中刪除此商品？</p>','</div>','<div class="dialog-console">','<a class="console-btn-confirm" href="#" οnclick="return false;" title="確定">確定</a>','<a class="console-btn-cancel" href="#" οnclick="return false;" title="取消">取消</a>','</div>','</div>'].join('');var dialogEle = $(tpl).appendTo('body');var mainEle = dialogEle.filter('.dialog-delorder');var top = _this.offset().top + 20;var left = _this.offset().left;mainEle.css('top', top);mainEle.css('left', left);dialogEle.filter('.dialog-bg').css('height', $(document).height());dialogEle.find('a.console-btn-confirm').click(function () {tips.warTip("ID為 " + _this.attr("item_id") + " 的商品已經被刪除了！");$(".dialog-delorder").remove();});dialogEle.find('a.console-btn-cancel,a.dialog-close').click(function () {$(".dialog-delorder").remove();});},warTip: function (txt) {var tpl = ['<div class="dialog-war">','<div class="dialog-bar">','提示','<a href="#" οnclick="return false;" class="dialog-close" title="關閉"></a>','</div>','<div class="dialog-content">','<p>' + txt + '</p>','<div class="dialog-console">','<a class="console-btn-confirm" href="#" οnclick="return false;" title="確定">確定</a>','</div>','</div>','</div>'].join('');var dialogEle = $(tpl).appendTo('body');var mainEle = dialogEle.filter('.dialog-war');var left = ($(window).width() - mainEle.width()) / 2;mainEle.css('left', left);mainEle.css('top', '200px');dialogEle.filter('.dialog-bg').css('height', $(document).height());dialogEle.find('a.dialog-close,a.console-btn-confirm').click(function () {$(".dialog-war").remove();});}};});

via：http://***/Article/25539

轉載于:https://www.cnblogs.com/liaohuolin/p/4313220.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的一款基于jQuery外观优雅带遮罩弹出层对话框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。