首页 > 代码库 > 弹出层

弹出层

源码:

/// <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: "内容",            width: 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: _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: _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: _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="http://www.mamicode.com/" 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: _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="http://www.mamicode.com/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="width: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>

 

源码下载

弹出层