弹出层

源码：

/// <reference path="../../Scripts/jquery-1.7.1.min.js" />

/*
    2014-9-3
    by tonglu_wzq
*/

; (function ($) {

    var tool = {
        format: function (source, params) {
            if (arguments.length == 1)
                return function () {
                    var args = $.makeArray(arguments);
                    args.unshift(source);
                    return $.validator.format.apply(this, args);
                };
            if (arguments.length > 2 && params.constructor != Array) {
                params = $.makeArray(arguments).slice(1);
            }
            if (params.constructor != Array) {
                params = [params];
            }
            $.each(params, function (i, n) {
                source = source.replace(new RegExp("\{" + i + "\}", "g"), tool.isNull(n) ? '' : n);
            });
            return source;
        },
        isNull: function (obj) {
            return typeof obj == "undefined" || obj == null;
        },
        addEvent: function (elem, etype, fn, useCapture) {
            if (elem.addEventListener) {
                elem.addEventListener(etype, fn, useCapture);
            } else if (elem.attachEvent) {
                elem.attachEvent("on" + etype, fn);
            } else {
                elem["on" + etype] = fn;
            }
        },
        removeEvent: function (elem, etype, fn) {
            if (elem.removeEventListener) {
                elem.removeEventListener(etype, fn, false);
            } else if (elem.detachEvent) {
                elem.detachEvent("on" + etype, fn);
            } else {
                elem["on" + etype] = null;
            }
        }
    };

   
    var dlg = function () {
        this.para = {
            title: "标题",
            content: "内容",
             250,
            height: 200,
            icon: null,
            fnOk: null,
            fnNo: null
        };
    };
    dlg.prototype = {
        icon: {
            icon_error: $('<i class="dialog_icon dialog_icon_error"></i>'),
            icon_ques: $('<i class="dialog_icon dialog_icon_ques"></i>'),
            icon_success: $('<i class=" dialog_icon dialog_icon_success"></i>'),
        },
        _open: function (obj, mask, isAutoClose) {
            var _this = this;
            $("body").append(mask).append(obj);
            if (isAutoClose == true) {//自动关闭
                setTimeout(function () {
                    _this._close(obj, mask);
                }, 1000);
            }

            document.onkeydown = function (e) {
                e = e || window.event;
                var keycode = e.which ? e.which : e.keyCode;
                if (keycode == 27) {

                    _this._close(obj, mask);
                }
            }

            _this._resize(obj, mask);
            $(window).on("resize", function () {
                _this._resize(obj, mask);
            });
        },
        _resize: function (obj, mask) {
            var t = ($(window).height() - obj.height()) / 3;
            var l = ($(window).width() - obj.width()) / 2;
            if (t < 0) t = 0;
            obj.css({ "top": t, "left": l });
            mask.height($(window).height());
        },
        _close: function (obj, mask) {
            mask.fadeOut(200, function () {
                obj.remove();
                mask.remove();
            });
            $(window).unbind("resize");

        },
        close: function (id) {
            this._close($("#" + id), $("#mask_" + id));
        },
        _drgn: function (head, obj) {
            var m_x, m_y;
            head.on("mousedown", function (e) {
                e = e || window.event;
                m_x = e.clientX - obj.offset().left;
                m_y = e.clientY - obj.offset().top;
                tool.addEvent(document, "mousemove", _move, false);
                tool.addEvent(document, "mouseup", _end, false);
            });

            var _move = function (e) {
                var l = e.clientX - m_x - $(document).scrollLeft();
                var t = e.clientY - m_y - $(document).scrollTop();
                var ww = $(window).width(), wh = $(window).height(), ow = obj.width(), oh = obj.height();
                l = l < 0 ? 10 : l + ow > ww ? ww - ow - 10 : l;
                t = t < 0 ? 10 : t;// + oh > wh ? wh - oh - 10 : t;
                obj.css({ "left": l, "top": t });
                window.getSelection ? window.getSelection().removeAllRanges() : document.getSelection().empty();
            }
            var _end = function () {
                tool.removeEvent(document, "mousemove", _move);
                tool.removeEvent(document, "mouseup", _end);
            }

        },
        _play: function (id, para, ele, minmax) {
            var _dlg = new dlg();//, ele = new this.element();
            ele.obj.append(ele.head).append(ele.cont).append(ele.font);

            ele.head.find("span").html(para.title);  //标题

            if (para.icon != null) { ele.cont.css("padding", "13px"); ele.cont.append(para.icon); }  //图标

            ele.cont.append(ele.text); //内容
            if (para.content) { ele.text.html(para.content); }

            if (para.fnOk != null && para.fnOk.constructor == Function) { ele.font.append(this.btn("确认", "btn_yes", para.fnOk)); }  //确认按钮

            if (para.fnNo != null && para.fnNo.constructor == Function) { ele.font.append(this.btn("取消", "btn_no", para.fnNo)); }  //取消按钮

            if (ele.framk) {//iframe
                ele.cont.append(ele.framk);
                ele.framk.attr("src", ele.url);
                ele.framk.css({ "width": ele.width - 5 + "px", "height": ele.height - 20 });
            }
            ele.obj.css({ "width": para.width + "px" });
            ele.obj.attr("id", id);
            ele.mask.attr("id", "mask_" + id);

            //“关闭”图标
            ele.head.find("i:eq(0)").on("click", function () {
                ele.mask.fadeOut(200, function () {
                    ele.obj.remove();
                    ele.mask.remove();
                });
                $(window).unbind("resize");
            });

            //“最大化”图标
            if (minmax && minmax == true) {

                ele.head.find("i[class='dialog_close']").after(ele.maxmin);
                var _height = 0;
                var _width = 0;

                ele.head.find("i:eq(1)").toggle(
                    function () {//最大化
                        _height = ele.obj.css("height");
                        _width = ele.obj.css("width");
                        ele.obj.css({ "top": "5px", "left": "5px", "width": $(window).width() - 12 });
                        if (ele.framk) {
                            ele.obj.css({ "height": $(window).height() - 12 });
                            ele.framk.css({
                                "width": parseInt(ele.obj.css("width")) - 10 + "px", "height": parseInt(ele.obj.css("height")) - 41 + "px"
                            })

                        }
                        ele.maxmin.removeClass("dialog_max").addClass("dialog_min");

                    },
                    function () {//还原
                        ele.maxmin.removeClass("dialog_min").addClass("dialog_max");
                        ele.obj.css({ "width": _width, "height": _height });
                        if (ele.framk) {
                            ele.framk.css({
                                "width": parseInt(_width) - 10 + "px", "height": parseInt(ele.obj.css("height")) - 41 + "px"
                            })
                        };
                        _dlg._resize(ele.obj, ele.mask);

                    });
            }
            _dlg._open(ele.obj, ele.mask);
            _dlg._drgn(ele.head, ele.obj);
            return false;
        },
        btn: function (txt, cla, fn) {
            return $('<a href="javascript:;"></a>')
                .attr({ "class": cla, "title": txt })
                .css({ "margin-left": "10px" })
                .html(txt)
                .on("click", function () { fn(); });
        },
        Box: {
            element: function () {
                this.obj = $('<div class="dialog_main"></div>');
                this.head = $('<div class="dialog_title"><span>标题</span><i class="dialog_close"></i></div>');
                this.cont = $('<div class="dialog_content"></div>');
                this.text = $('<span class="dialog_txt">内容</span>');
                this.font = $('<div class="dialog_font"></div>');
                this.maxmin = $('<i class="dialog_max_min dialog_max"></i>');
                this.mask = $('<div class="dialog_Mask"><iframe scrolling="no"></iframe ></div>');//<iframe scrolling="no"></iframe >/*IE 覆盖select*/
            },
            //对话弹出层
            Confrim: function (id, _title, _content, _width, _fnOk, _fnNo) {
                var _dlg = new dlg();
                var p = _dlg.para;
                $.extend(p, { title: _title, content: _content,  _width, fnOk: _fnOk, fnNo: _fnNo, icon: _dlg.icon.icon_ques });
                _dlg._play(id, p, new this.element());
            },
            //普通弹出层(没有按钮、图标)
            Info: function (id, _title, _content, _width) {
                var _dlg = new dlg();
                var p = _dlg.para;
                $.extend(p, { title: _title, content: _content,  _width });
                _dlg._play(id, p, new this.element(), true);
            },
            //普通弹出层有按钮没图标
            Comm: function (id, _title, _content, _width, _fnOk, _fnNo) {
                var _dlg = new dlg();
                var p = _dlg.para;
                $.extend(p, { title: _title,  _width, content: _content, fnOk: _fnOk || function () { }, fnNo: _fnNo || function () { } });
                _dlg._play(id, p, new this.element(), false);
            }
        },
        //提示框
        Msg: {
            element: function () {
                this.obj = $('<div class="dialog_Msg_Main">');
                this.cont = $('<div class="dialog_Msg_Content">');
                this.icon_info = $('<i class="dialog_icon_info"></i>');
                this.text = $(' <span class="dialog_Msg_txt">提示内容！</span>');
                this.mask = $('<div class="dialog_Mask"><iframe scrollint="no"></iframe ></div>');
            },
            //成功信息提示框
            Success: function (txt) {
                var _dlg = new dlg(), e = new this.element(), p = _dlg.para;
                e.obj.append(e.cont);
                e.cont.append(_dlg.icon.icon_success);
                e.cont.append(e.text);
                e.text.html(txt);
                _dlg._open(e.obj, e.mask, true);
            },
            //错误信息提示框
            Error: function (txt) {
                var _dlg = new dlg(), e = new this.element(), p = _dlg.para;
                e.obj.append(e.cont);
                e.cont.append(_dlg.icon.icon_error);
                e.cont.append(e.text);
                e.text.html(txt);
                _dlg._open(e.obj, e.mask, true);
            }
        },
        Frame: {
            element: function () {
                this.id = "cusIFrame";
                this.width = 500;
                this.height = 450;
                this.title = "标题";
                this.url = "/";
                this.obj = $('<div class="dialog_main"></div>');
                this.head = $('<div class="dialog_title"><span>标题</span><i class="dialog_close"></i></div>');
                this.cont = $('<div class="dialog_content"></div>');
                this.framk = $('<iframe src="/" width="100%" height="100%" frameborder="no"   border="no" overflow="auto"></iframe>');
                this.mask = $('<div class="dialog_Mask"><iframe scrolling="no"></iframe ></div>');
                this.maxmin = $('<i class="dialog_max_min dialog_max"></i>');
            },
            Open: function (_id, _title, _url, _width, _height) {
                var _dlg = new dlg(), ele = new this.element();
                $.extend(ele, { id: _id, title: _title, url: _url,  _width, height: _height });
                _dlg._play(ele.id, ele, ele, true);
                return false;
            }
        }
    };
    $.dlg = new dlg;

})(jQuery);

页面调用：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
 <!--   <link href="Content/qz_dialog.css" rel="stylesheet" />-->
    <link href="Content/css/dialog.css" rel="stylesheet" />
    <script src="Content/js/dialog.js"></script>
    <style type="text/css">
        ul li {
            text-decoration: none;
            list-style: none;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div style="margin: 100px;">
        <ul>
            <li><a href="javascript:;" onclick="showConfirm()">弹出对话框</a> </li>
            <li><a href="javascript:;" onclick="showInfo();">弹出普通层</a></li>
            <li><a href="javascript:;" onclick="showComm();">弹出普通层(有按钮)</a></li>


            <li><a href="javascript:;" onclick="showMsg();">弹出成功提示框</a></li>
            <li><a href="javascript:;" onclick="showErrorMsg();">弹出错误提示框</a></li>

            <li><a href="javascript:;" onclick="showFrame();">弹出Iframe</a></li>


        </ul>

    </div>
    <script type="text/javascript">
        //function show() {
        //    $.dlg.Box.Confrim("log", "操作提示", '确定删除该订单吗？', function () { alert('执行删除操作'); }, function () { alert('取消删除操作'); $.dlg.close("log"); }, 300);

        //}

        //function OpenMsg() {
        //    $.dlg.Msg.Comm("表单提交成功！");
        //}

    </script>
    <script type="text/javascript">

        $(function () {
            //   DrgnMove(".dialog_title", ".dialog_main", 1);
            //   DrgnMove(".dialog_title", ".dialog_main", 2);
            // $.dlg._drgn($("#title"), $("#main"))
            //  $.dlg.Box.Confrim("log", "操作提示1", '确定删除该订单吗？', function () { alert('执行删除操作'); }, function () { alert('取消删除操作'); $.dlg.close("log"); }, 300);

        });

        function showErrorMsg(txt) {
            $.dlg.Msg.Error("删除订单失败！");
        }

        function showMsg() {
            $.dlg.Msg.Success("删除订单成功！");
        }

        function showConfirm() {

            $.dlg.Box.Confrim("log", "系统提示", '确定删除该订单吗？', 300,
                function () { alert('执行删除操作'); $.dlg.Msg.Success("删除订单成功！"); $.dlg.close("log"); },
                function () { alert('取消删除操作'); $.dlg.close("log"); });
        }

        function showInfo() {
            $.dlg.Box.Info("info"
                , "自定义标题"
                , '刘云山：领导干部要心中有杆秤，手中有戒尺
2014年09月08日 11:55:40 来源： 学习时报', 800);
        }

        function showComm() {
            $.dlg.Box.Comm("com"
                , "学生列表"
                , '<table style="100%;">
                    <tr>
                        <th>名称</th>
                        <th>年龄</th>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>24</td>
                    </tr><tr>
                        <td>张三</td>
                        <td>24</td>
                    </tr><tr>
                        <td>张三</td>
                        <td>24</td>
                    </tr><tr>
                        <td>张三</td>
                        <td>24</td>
                    </tr>
                </table>'
                , 300, function () { alert("自定义确定事件"); }, function () { alert("自定义取消事件"); $.dlg.close("com") });
        }

        function showFrame() {
            $.dlg.Frame.Open("fa", "网页内容", "http://news.baidu.com/", 888, 600);
        }
    </script>

</body>
</html>

源码下载