网站技术
当前目录:首页 >> 新闻中心 >> 网站技术

JQuery MessageBox 模拟弹出窗口

发布人:卓伟软件
发布日期:2014-05-09 17:38:33
浏览次数:1569
/**
* Dialog
* @author    jacky <http://www.d369.net>
* @copyright Copyright (C) 2013, http://www.d369.net*
* jQuery的Dialog插件。*
* @param object options 选项。
* @return 
*/
function Dialog(options) {
    var defaults = { // 默认值。 
        title: '标题',       // 标题文本,若不想显示title请通过CSS设置其display为none 
        showTitle: true,     // 是否显示标题栏。
        closeText: '', // 关闭按钮文字,若不想显示关闭按钮请通过CSS设置其display为none 
        draggable: true,     // 是否移动 
        modal: true,         // 是否是模态对话框 
        center: true,        // 是否居中。 
        fixed: true,         // 是否跟随页面滚动。
        time: 0,             // 自动关闭时间,为0表示不会自动关闭。 
        id: false,            // 对话框的id,若为false,则由系统自动产生一个唯一id。
        width: 200, //宽
        height: 300, //高
        scroll: "auto", //框架是否有滚动条
        type: "",
        value: "", //HTML内容
        btnsbar: [],
        textType : "",
        tips :"请输入"
    };
    var options = $.extend(defaults, options);
    options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID
    var overlayId = options.id + '-overlay'; // 遮罩层ID
    var timeId = null,isShow = false;
    var isIe = $.browser.msie,isIe6 = $.browser.msie && ('6.0' == $.browser.version);
    /* 对话框的布局及标题内容。*/
    var barHtml = !options.showTitle ? '' :
    '<div class="dialogbar"><span class="dialogbartitle">' + options.title + '</span><a class="dialogclose">' + options.closeText + '</a></div>';
    var dialog = $('<div id="' + options.id + '" class="dialog">' + barHtml + '<div class="dialogcontent"></div></div>').hide();
    $('body').append(dialog);
    /**
    * 重置对话框的位置。
    * 主要是在需要居中的时候,每次加载完内容,都要重新定位
    * @return void
    */
    var resetPos = function () {
        /* 是否需要居中定位,必需在已经知道了dialog元素大小的情况下,才能正确居中,也就是要先设置dialog的内容。 */
        if (options.center) {
            var left = ($(window).width() - dialog.width()) / 2,top = ($(window).height() - dialog.height()) / 2;
            if (!isIe6 && options.fixed)
            { dialog.css({ top: top, left: left }); }
            else
            { dialog.css({ top: top + $(document).scrollTop(), left: left + $(document).scrollLeft() }); }
        }
    }
    /**
    * 初始化位置及一些事件函数。
    * 其中的this表示Dialog对象而不是init函数。
    */
    var init = function () {
        /* 是否需要初始化背景遮罩层 */
        if (options.modal) {
            $('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>');
            $('#' + overlayId).css({ 'left': 0, 'top': 0, 'width': '100%', 'height': $(document).height(),
                'z-index': ++Dialog.__zindex, 'position': 'absolute'
            }).hide();
        }
        dialog.css({ 'z-index': ++Dialog.__zindex, 'position': options.fixed ? 'fixed' : 'absolute', 'width': options.width });
        /*  IE6 兼容fixed代码 */
        if (isIe6 && options.fixed) {
            dialog.css('position', 'absolute'); resetPos();
            var top = parseInt(dialog.css('top')) - $(document).scrollTop();
            var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
            $(window).scroll(function () {
                dialog.css({ 'top': $(document).scrollTop() + top, 'left': $(document).scrollLeft() + left });
            });
        }
        /* 以下代码处理框体是否可以移动 */
        var mouse = { x: 0, y: 0 };
        function moveDialog(event) {
            var e = window.event || event, top = parseInt(dialog.css('top')) + (e.clientY - mouse.y), left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
            dialog.css({ top: top, left: left }); mouse.x = e.clientX; mouse.y = e.clientY;
        };
        dialog.find('.dialogbar').mousedown(function (event) {
            if (!options.draggable) { return; }
            var e = window.event || event;
            mouse.x = e.clientX; mouse.y = e.clientY;
            $(document).bind('mousemove', moveDialog);
        });
        $(document).mouseup(function (event) { $(document).unbind('mousemove', moveDialog); });
        /* 绑定一些相关事件。 */
        dialog.find('.dialogclose').bind('click', this.close);
        dialog.bind('mousedown', function () { dialog.css('z-index', ++Dialog.__zindex); });
        // 自动关闭 
        if (0 != options.time) { timeId = setTimeout(this.close, options.time); }
        $(window).resize(resetPos);
    }
    /**
    * 设置对话框的内容。
    * @param string c 可以是HTML文本。
    * @return void
    */
    this.setContent = function () {
        var div = dialog.find('.dialogcontent'), f = new Date().getTime();
        if ("object" == typeof (options)) {
            switch (options.type.toLowerCase()) {
                case "id": // 将ID的内容复制过来,原来的还在。
                    div.html($('#' + options.value).html());
                    break;
                case "img":
                    div.html('加载中...');
                    $('<img alt="" />').load(function () { div.empty().append($(this)); resetPos(); }).attr('src', options.value);
                    break;
                case "url":
                    div.html('加载中...');
                    $.ajax({ url: options.value,
                        success: function (html) { div.html(html); resetPos(); },
                        error: function (xml, textStatus, error) { div.html('出错啦') }
                    });
                    break;
                case "iframe":
                    div.html('<iframe src="' + options.value + '" id="I_' + options.id + '" name="I_' + options.id + '" frameborder="0" style="width:' + options.width + 'px;height:' + options.height + 'px;" scrolling="' + options.scroll + '"/>');
                    break;
                case "alert":
                case "confirm":
                case "error":
                case "warning":
                case "success":
                    div.html('<div class="dialogmsg"><div class="dialog' + options.type + '"></div>' + options.value + '</div>');
                    break;
                case "tips":
                    div.html('<div class="dialogmsg dialogtip"><div class="dialog' + (options.textType || 'success') + '"></div>' + options.value + '</div>');
                    break;
                case "prompt":
                    if (options.textType.toLowerCase() == "textarea")
                        textString = '<textarea id="Text_' + f + '" name="Text_' + f + '" type="' + options.textType + '" class="dialogtext">' + options.value + '</textarea>';
                    else
                        textString = '<input id="Text_' + f + '" name="Text_' + f + '" type="' + options.textType + '" value="' + options.value + '" class="dialogtext"/>';
                    div.html('\
                        <div class="dialogmsg" style="padding-left:10px;"><div class="dialogtips">' + options.tips + '</div>\
                        <div class="dialoginput">' + textString + '</div></div>');
                    break;
                case "html":
                default:
                    div.html(options.value);
                    break;
            }
            if (options.btnsbar.length > 0) {
                var btns = '<div class="dialogbtns">';
                for (var i = 0; i < options.btnsbar.length; i++) {
                    var _btn = options.btnsbar[i];
                    if (_btn.action == "ok" || _btn.action == "yes") {
                        btns += '<input id="OK_' + f + '" name="OK_' + f + '" class="dialogok" type="button" value="' + _btn.text + '"/>';
                    } else if (_btn.action == "cancel" || _btn.action == "close" || _btn.action == "no") {
                        btns += '<input id="Close_' + f + '" name="Close_' + f + '" class="dialogclose" type="button" value="' + _btn.text + '"/>';
                    }
                }
                btns += '</div>';
                div.append($(btns)); var self = this;
                div.find(".dialogok").click(function () {
                    if (options.type.toLowerCase() == "iframe") {
                        var _form = self.documentFrames("I_" + options.id).document.forms;
                        if (_form.length == 0)
                            self.close("cancel");
                        else
                            _form[0].submit();
                    } else {
                        if (options.type.toLowerCase() == "prompt") {
                            var val = div.find(".dialogtext").val(); self.close("ok", val);
                        } else
                            self.close("ok");
                    }
                });
                div.find(".dialogclose").click(function () { self.close("cancel"); });
            }
        }
        else
        { div.html("配置出错."); }
    }
    this.documentFrames = function (id) { return document.frames ? document.frames(id) : document.getElementById(id).contentWindow; }
    /**
    * 显示对话框
    */
    this.show = function () {
        if (undefined != options.beforeShow && !options.beforeShow(this)) { return; }
        /**
        * 获得某一元素的透明度。IE从滤境中获得。
        * @return float
        */
        var getOpacity = function (id) {
            if (!isIe) { return $('#' + id).css('opacity'); }
            var el = document.getElementById(id);
            return (undefined != el && undefined != el.filters
                && undefined != el.filters.alpha
                && undefined != el.filters.alpha.opacity)
            ? el.filters.alpha.opacity / 100 : 1;
        }
        /* 是否显示背景遮罩层 */
        if (options.modal) { $("#" + overlayId).fadeTo("slow", getOpacity(overlayId)); }
        dialog.fadeTo("slow", getOpacity(options.id), function () {
            if (undefined != options.afterShow) { options.afterShow(this); }
            isShow = true;
        });
        // 自动关闭 
        if (0 != options.time) { timeId = setTimeout(this.close, options.time); }
        resetPos();
    }
    /**
    * 隐藏对话框。但并不取消窗口内容。
    */
    this.hide = function () {
        if (!isShow) { return; }
        if (undefined != options.beforeHide && !options.beforeHide(this)) { return; }
        dialog.fadeOut("slow", function () {
            if (undefined != options.afterHide) { options.afterHide(this); }
        });
        if (options.modal) { $("#" + overlayId).fadeOut("slow"); }
        isShow = false;
    }
    /**
    * 关闭对话框 
    * @return void
    */
    this.close = function (t, value) {
        t = Object.prototype.toString.call(t) === "[object String]" ? t : "close";
        if (undefined != options.beforeClose && !options.beforeClose(t, value)) { return; }
        dialog.fadeOut("slow", function () {
            $(this).remove();isShow = false;
            if (undefined != options.afterClose) { options.afterClose.call(this, t, value); }
        });
        if (options.modal) { $("#" + overlayId).fadeOut("slow", function () { $(this).remove(); }); }
        clearTimeout(timeId);
    }
    init.call(this);
    this.setContent();
    Dialog.__count++;Dialog.__zindex++;
}
Dialog.__zindex = 851006;
Dialog.__count = 1;
Dialog.version = "1.1 beta";
var MessageBox = {
    alert: function (content, title, fn) {
        new Dialog({ title: title || "提示", value: content, afterClose: fn, type: "alert", btnsbar: MessageBox.btn.OK }).show();
    },
    confirm: function (content, title, fn) {
        new Dialog({ title: title || "询问", value: content, afterClose: fn, type: "confirm", btnsbar: MessageBox.btn.OKCANCEL }).show();
    },
    error: function (content, title, fn) {
        new Dialog({ title: title || "提示", value: content, afterClose: fn, type: "error", btnsbar: MessageBox.btn.OK }).show();
    },
    success: function (content, title, fn) {
        new Dialog({ title: title || "提示", value: content, afterClose: fn, type: "success", btnsbar: MessageBox.btn.OK }).show();
    },
    tips: function (content, textType, timer, fn) {
        new Dialog({ showTitle: false, value: content, type: "tips", textType: (textType || "ok"), time: (timer || 3000), afterClose: fn }).show();
    },
    warning: function (content, title, fn) {
        new Dialog({ title: title || "警告", value: content, afterClose: fn, type: "warning", btnsbar: MessageBox.btn.OK }).show();
    },
    prompt: function (title, tips, content, textType, fn) {
        new Dialog({ type: "prompt", tips: tips || "请输入:", value: content, textType: textType || "text", btnsbar: MessageBox.btn.OKCANCEL, afterClose: fn }).show();
    },
    open: function (options) {
        var defaults = { type: "iframe", value: "", html: "" };
        options = $.extend(defaults, options);
        options.value = options.value || options.url;
        options.afterClose = options.afterClose || options.callback;
        if (options.html != "") { options.type = "html"; options.value = options.html; }
        var dg = new Dialog(options);
        dg.show();
        return dg;
    },
    btn: {
        OK: [{ text: "确 定", action: "ok"}],
        NO: [{ text: "否", action: "no"}],
        YES: [{ text: "是", action: "yes"}],
        CANCEL: [{ text: "取 消", action: "cancel"}],
        CLOSE: [{ text: "关 闭", action: "close"}]
    },
    close: function (id) {
        $("#" + id).fadeOut("slow", function () { $(this).remove(); });
        $("#" + id + "-overlay").fadeOut("slow", function () { $(this).remove(); });
    }
}
MessageBox.btn.OKCANCEL = MessageBox.btn.OK.concat(MessageBox.btn.CANCEL);
MessageBox.btn.YESNO = MessageBox.btn.OK.concat(MessageBox.btn.NO);

$.fn.close = function () { $.close($(this).attr("id")); }
$.close = function (id) { MessageBox.close(id); }
$.btn = MessageBox.btn;
$.btn.OKCANCEL = MessageBox.btn.OKCANCEL;
$.btn.YESNO = MessageBox.btn.YESNO;

Copyright © 2010 - 2015 Zhuovi. All Rights Reserved
联系电话:15837199978  E-Mail:service@zhuovi.com  在线QQ:点击这里给我发消息 点击这里给我发消息  备案号:豫ICP备14022191号
郑州网站建设 | 河南网站建设 | 郑州软件 | 河南软件 | 办公软件 | 移动短信 | 注册域名 | 虚拟空间,网站空间 | 群发短信 | 网站优化 | 网站推广 | 优化技术 | 郑州作网站 | 河南作网站
在线咨询 返回顶部