jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框

作者:foren_whb

        最近封装上瘾,想起以前做的一个轻巧的弹出框,是样式和脚本分离的,于是重新封装了一下,把样式标签统一到js里了。
里面还有一些问题,但不影响使用,有兴趣的同学,可以参考完善下,有好的建议,请不吝赐教。


if (typeof jQuery === 'undefined') { throw 'no jquery'; }
(function () {
    window.PopDialog = window.PopDialog || {
        defaultConfig:{
            hasCover: true,                             //是否带遮罩层
            colorOfCover: "#000",                       //遮罩层颜色
            opacity: 20,                                //遮罩层透明度
            borderColor: "blue",                        //边框标题背景颜色
            titleHeight: 30,                            //标题高度
            titleFont: '18px "Microsoft Yahei"',        //标题字体
            titleFontSize: 18,                          //标题文字大小
            titleColor: "white",                        //标题文字颜色
            titleFontFamily: "Microsoft Yahei",         //标题字体
            contentWidth: 560,                          //内容框宽度
            contentHeight: 480,                         //内容框的高度
            borderWidth: 2,                             //边框宽度
            backColor: "#EC90F6",                       //背景色
            seq: 0,                                     //序列号
            moveAble: true,                             //是否可以鼠标拖动
            callBack: null,                             //回调方法
        },
        mergeJsonObj: function (s, o) {
            var r = {};
            for (var p in s) {
                r[p] = s[p];
            }
            for (var q in o) {
                r[q] = o[q];
            }
            return r;
        },
        hToInt: function (c, n) {
            var s = c.toUpperCase(),
                i = s == 'A' ? 10
                  : s == 'B' ? 11
                  : s == 'C' ? 12
                  : s == 'D' ? 13
                  : s == 'E' ? 14
                  : s == 'F' ? 15
                  : parseInt(s, 10);
            return n == 0 ? i : i * 16;
        },
        getRGB: function (c) {
            var rgb = {}, c = c.replace('#', '');
            if (c.length == 3) {
                rgb.r = this.hToInt(c.substr(0, 1), 1) + this.hToInt(c.substr(0, 1), 0);
                rgb.g = this.hToInt(c.substr(1, 1), 1) + this.hToInt(c.substr(1, 1), 0);
                rgb.b = this.hToInt(c.substr(2, 1), 1) + this.hToInt(c.substr(2, 1), 0);
            } else {
                rgb.r = this.hToInt(c.substr(0, 1), 1) + this.hToInt(c.substr(1, 1), 0);
                rgb.g = this.hToInt(c.substr(2, 1), 1) + this.hToInt(c.substr(3, 1), 0);
                rgb.b = this.hToInt(c.substr(4, 1), 1) + this.hToInt(c.substr(5, 1), 0);
            }
            return rgb;
        },
        show: function (containner, content, title, config) {
            content = content || "这里什么都没有!";
            title = title || "提示";
            var dialog = new Object,
                c = dialog.config = this.mergeJsonObj(this.defaultConfig, config);
            c.id = 'pop_' + c.seq++;
            containner.attr("popIdx", c.id);
            var opacity  = c.opacity / 100,
                rgb      = this.getRGB(c.colorOfCover),
                width    = c.contentWidth + c.borderWidth * 2,
                height   = c.contentHeight + c.borderWidth + c.titleHeight;
            dialog.cover = $('<div  id="' + c.id + '_cover"   style="background-color: rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ');width:100%;height:100%;position:absolute;top:0;left:0;"z-index:99999></div>');
            dialog.frame = $('<div  id="' + c.id + '_frame"   style="background-color:' + c.borderColor + ';position:fixed;width: ' + width + 'px;height: ' + height + 'px;top:calc(50% - ' + height / 2 + 'px);left:calc(50% - ' + width / 2 + 'px);"></div>');
            dialog.top   = $('<div  id="' + c.id + '_top"     style="background-color:' + c.borderColor + ';height:' + c.titleHeight + 'px;line-height:' + c.titleHeight + 'px;display:block;width:100%;clear:both;vertical-align:middle"></div>').appendTo(dialog.frame);
            dialog.title = $('<span id="' + c.id + '_title"   style="display:inline-block;font-size:' + c.titleFontSize + 'px;padding-left:10px;color:' + c.titleColor + ';">' + (title || "提示") + '</span>').appendTo(dialog.top);
            dialog.close = $('<a    id="' + c.id + '_close"   style="display:block;float:right;text-decoration: none;margin-right:10px;clear:right;color:white;font-size:' + c.titleHeight * 8 / 10 + 'px;" href="#">X</a>').appendTo(dialog.top);
            dialog.body  = $('<div  id="' + c.id + '_content" style="background-color:' + c.backColor + ';width:' + c.contentWidth + 'px;height:' + c.contentHeight + 'px;margin-left:' + c.borderWidth + 'px;">' + content + '</div>').appendTo(dialog.frame);
            if (c.hasCover) {
                dialog.PopDom = dialog.cover;
                dialog.frame.appendTo(dialog.cover);
                dialog.PopDom.appendTo(containner);
            } else {
                dialog.PopDom = dialog.frame.appendTo(containner);
            }
            dialog.close.on("click", function () {
                var str = $(this).attr('id').replace('close', '');
                $('[id^="' + str + '"]').remove();
            })
            dialog.x = dialog.y = dialog.mousekey = 0;
            if (c.moveAble) {
                dialog.top.on("mousedown", function (event) {
                    dialog.mousekey = true;
                    dialog.top.css("cursor", "move");
                    dialog.x = event.pageX - parseInt(dialog.frame.css("left"), 10);
                    dialog.y = event.pageY - parseInt(dialog.frame.css("top"), 10);
                    dialog.frame.fadeTo(20, 0.5);//点击后开始拖动并透明
                }).on('mouseout', function () {
                    dialog.mousekey = false;
                    dialog.top.css("cursor", "default");
                    dialog.frame.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
                });
                $(document).on('mousemove', function (e) {
                    if (dialog.mousekey) {
                        dialog.frame.css({ top: e.pageY - dialog.y, left: e.pageX - dialog.x });
                    }
                }).on('mouseup', function () {
                    dialog.mousekey = false;
                    dialog.top.css("cursor", "default");
                    dialog.frame.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
                });
            }
            return dialog;
        }
    }

    /* 
     * 关闭弹出框的方法
     * serial: 关闭的弹出框内部对象编号
     * Example: $(document.body).ClosePopDialog(1);
     */
    $.fn.ClosePopDialog = function () {
        var id = $(this).attr('popIdx');
        $('[id^="' + id + '_"]').remove();
    };
    /* 
     * 根据url取得内容并弹出框显示的方法
     * url: 需要显示的内容的url
     * title: 标题
     * popDialogConfig: 自定义样式
     * Example: $(document.body).PopDialogByUrl("/home/login", "Test Url", { backColor: "gray", borderColor: "blue", borderWidth: 2, contentWidth: 600, contentHeight: 480 });
     */
    $.fn.PopDialogByUrl = function (url, title, popDialogConfig) {
        var obj = $(this);
        if (url) {
            $.ajax({
                url: url,
                cache: false,
                success: function (result) {
                    if (result == "[]" || result == "") {
                        result = "系统忙,请稍后再试!";
                    }
                    return PopDialog.show(obj, result, title, popDialogConfig);
                },
                error: function (result) {
                    if (result == "[]" || result == "") {
                        result = "系统错误,请联系管理员!";
                    }
                    return PopDialog.show(obj, result, title, popDialogConfig);
                }
            });
        }
    };
    /* 
     * 弹出框显示提供的内容的方法
     * content: 需要显示的内容
     * title: 标题
     * popDialogConfig: 自定义样式
     * Example: $(document.body).PopDialogByContent("<div>这是一个弹出框的例子!</div>", "Test Content", { backColor: "gray", borderColor: "blue", borderWidth: 2, contentWidth: 600, contentHeight: 480 });
     */
    $.fn.PopDialogByContent = function (content, title, popDialogConfig) {
        return PopDialog.show($(this), content, title, popDialogConfig);
    };
})(jQuery);


发表评论

5个评论

  • cen_cs

    为什么一定要引用个元素才能用这个弹出窗口呢?$(xxx).PopDialog(...);如果我想直接显示不行吗?比如我想弹出窗口:PopDialog(....);里面的参数自己提供,不需要引用元素

    2017-07-16 18:29:44回复

  • foren_whb

    回复cen_cs: 可以的,如果你看懂了代码,就知道如何使用了。我这里只是要一个父容器,你把父容器设置为body标签,也是一样的使用。比如:var dialog = PopDialog.show($(‘body’), content, title, popDialogConfig)

    2017-07-17 14:50:14回复

  • foren_whb

    我晕,收录的代码有很多问题。。。。早知道要被收录,就早点更新撒。。。。

    2016-08-13 13:25:34回复

  • u013047005

    很不错的demo,感谢分享,收录给大家学习了解哦

    2016-07-30 22:48:18回复

  • wangdan1030

    代码真的不错,加油!

    2015-05-31 21:51:26回复

我要留言×

技术领域:

我要留言×

留言成功,我们将在审核后加至投票列表中!

提示x

jQuery知识库已成功保存至我的图谱现在你可以用它来管理自己的知识内容了

删除图谱提示×

你保存在该图谱下的知识内容也会被删除,建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗?

删除节点提示×

无法删除该知识节点,因该节点下仍保存有相关知识内容!

删除节点提示×

你确定要删除该知识节点吗?