一款基於jQuery外觀優雅帶遮罩彈出層對話框

今天我們要來分享一款基於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="#" onclick="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="#" onclick="return false;" title="確定">確定</a>',
              '<a class="console-btn-cancel" href="#" onclick="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="#" onclick="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="#" onclick="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://www.w2bc.com/Article/25539