jquery實現代替alert網頁提示框代碼封裝


windows的alert不好修改,一丑二難用,我常用2種, 一種layer,另一種dialog,以下為dialog部分js封裝

//前台調用方法封裝。
//通用彈出提示文本信息

jQuery.extend(jQuery, {

    // jQuery UI alert彈出提示
    jqalert: function (text, title, fn) {
        var html =
    '<div class="dialog" id="dialog-message">' +
    '  <p>' +
    '    <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
    '  </p>' +
    '</div>';
        return $(html).dialog({
            //autoOpen: false,
            resizable: false,
            modal: true,
            show: {
                effect: 'fade',
                duration: 300
            },
            title: title || "提示信息",
            buttons: {
                "確定": function () {
                    var dlg = $(this).dialog("close");
                    fn && fn.call(dlg);
                }
            }
        });
    },

    // jQuery UI alert彈出提示,一定間隔之后自動關閉
    jqtimeralert: function (text, title, fn, timerMax) {
        var dd = $(
    '<div class="dialog" id="dialog-message">' +
    '  <p>' +
    '    <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
    '  </p>' +
    '</div>');
        dd[0].timerMax = timerMax || 3;
        return dd.dialog({
            //autoOpen: false,
            resizable: false,
            modal: true,
            show: {
                effect: 'fade',
                duration: 300
            },
            open: function (e, ui) {
                var me = this,
          dlg = $(this),
          btn = dlg.parent().find(".ui-button-text").text("確定(" + me.timerMax + ")");
                --me.timerMax;
                me.timer = window.setInterval(function () {
                    btn.text("確定(" + me.timerMax + ")");
                    if (me.timerMax-- <= 0) {
                        dlg.dialog("close");
                        fn && fn.call(dlg);
                        window.clearInterval(me.timer); // 時間到了清除計時器
                    }
                }, 1000);
            },
            title: title || "提示信息",
            buttons: {
                "確定": function () {
                    var dlg = $(this).dialog("close");
                    fn && fn.call(dlg);
                    window.clearInterval(this.timer); // 清除計時器
                }
            },
            close: function () {
                window.clearInterval(this.timer); // 清除計時器
            }
        });
    },

    // jQuery UI confirm彈出確認提示
    jqconfirm: function (text, title, fn1, fn2) {
        var html =
    '<div class="dialog" id="dialog-confirm">' +
    '  <p>' +
    '    <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + text +
    '  </p>' +
    '</div>';
        return $(html).dialog({
            //autoOpen: false,
            resizable: false,
            modal: true,
            show: {
                effect: 'fade',
                duration: 300
            },
            title: title || "提示信息",
            buttons: {
                "確定": function () {
                    var dlg = $(this).dialog("close");
                    fn1 && fn1.call(dlg, true);
                },
                "取消": function () {
                    var dlg = $(this).dialog("close");
                    fn2 && fn2(dlg, false);
                }
            }
        });
    },

    // jQuery UI 彈出iframe窗口
    jqopen: function (url, options) {
        var html =
    '<div class="dialog" id="dialog-window" title="提示信息">' +
    ' <iframe src="' + url + '" frameBorder="0" style="border: 0; " scrolling="auto" width="100%" height="100%"></iframe>' +
    '</div>';
        return $(html).dialog($.extend({
            modal: true,
            closeOnEscape: false,
            draggable: false,
            resizable: false,
            close: function (event, ui) {
                $(this).dialog("destroy"); // 關閉時銷毀
            }
        }, options));
    },

    // jQuery UI confirm提示
    confirm: function (evt, text, title) {
        evt = $.event.fix(evt);
        var me = evt.target;
        if (me.confirmResult) {
            me.confirmResult = false;
            return true;
        }
        jQuery.jqconfirm(text, title, function (e) {
            me.confirmResult = true;
            if (e) {
                if (me.href && $.trim(me.href).indexOf("javascript:") == 0) {
                    $.globalEval(me.href);
                    me.confirmResult = false;
                    return;
                }
                var t = me.type && me.type.toLowerCase();
                if (t && me.name && (t == "image" || t == "submit" || t == "button")) {
                    __doPostBack(me.name, "");
                    me.confirmResult = false;
                    return;
                }
                if (me.click) me.click(evt);
            }
            return false;
        });
        return false;
    }
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM