纯div+css样式弹出泡泡消息框

也许很多框架都自带了这样的弹出泡泡框，但我没接触过，现在需要用，于是便自己用jquery封装了一个，完全div + css构成，兼容性好。虽然还不完美，但已经可以用了。这个小控件可以重定义样式，通过传递配置参数，或修改默认配置参数都可以进行样式调整。不管怎么说，就当是练手，或给新人提供一个参考学习的机会也行吧

 

/*
 * 弹出泡泡的默认样式
 */
var popMsgDefaultConfig = {
    cuspStyle: "1",                //相对定位的dom对象方位()
    cuspLength: 30,                //尖角长度
    cuspWidth: 15,                 //尖角宽度
    contentWidth: 160,             //消息文本框宽度
    contentHeight: 60,             //消息文本框的高度
    borderWidth: 2,                //边框宽度
    borderColor: "red",            //边框颜色
    backColor: "#EC90F6",          //背景色
    cuspShift: "60%",              //尖角位于消息内容框上/下时，指左位移，尖角位于消息内容框左/右时，指的上位移。
    contentShift: "20%",           //弹出框位于目标框上/下时，指左位移，弹出框位于目标框左/右时，指的上位移。
    textStyle: 'color: blue; font-size:small; font-family:"Microsoft YaHei";font-style:italic;', //默认内容文字样式
    /*
     * 配置文件合并
     */
    Merge: function (newConfig) {
        var result = {};
        for (var p in this) {
            result[p] = this[p];
            if (typeof (this[p]) == " function ") {
                this[p]();
            } else {
                for (var q in newConfig) {
                    if (p == q) {
                        result[p] = newConfig[q];
                    }
                }
            }
        }
        return result;
    }
};
/*
 * 拓展jquery对象的方法;
 */
(function ($) {
    /*
     * 关闭泡泡的方法
     */
    $.fn.ClosePopMsg = function () {
        var popmsg = $("#" + $(this).attr("id") + "_PopMsg");
        if (popmsg) {
            popmsg.remove();
        }
    };
    /*
     * 弹出泡泡的方法
     * text: 需要显示的消息内容
     * popMsgConfig： 自定义样式
     * Example: $("#divUserName").PopMsg("这是一个提示消息" { backColor: "gray", borderColor: "white", cuspStyle: "topleft",borderWidth: 1});
     */
    $.fn.PopMsg = function (text, popMsgConfig) {
        var o = $(this),f = o.offset(), id = o.attr("id") || Math.random(), c = popMsgDefaultConfig.Merge(popMsgConfig);
        o.attr("id", id).ClosePopMsg();
        //边框样式
        var popMsg = $("
").appendTo(document.body);
        var popContent = $("
" + text + "
").appendTo(popMsg);
        var popCusp = $("
").appendTo(popMsg);
        var popCuspInner = $("
").appendTo(popCusp);
        popContent.css({ borderWidth: c.borderWidth + "px", borderColor: c.borderColor, backgroundColor: c.backColor });
        var innerTop = (c.cuspLength - 3 * c.borderWidth) + "px",innerWidth = (c.cuspWidth - 2 * c.borderWidth) + "px";
            msgLeft = ((c.cuspStyle < 5 ? f.left : f.top) + (c.contentShift.indexOf("px") > 0 ? parseInt(c.contentShift) : o.width() * parseInt(c.contentShift) / 100)) + "px";
        if (c.cuspStyle == 1) {//1:topleft
            popCusp.css({ borderTopWidth: c.cuspLength + "px", borderTopStyle: "solid", borderTopColor: c.borderColor, borderRightWidth: c.cuspWidth + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginTop: "-" + c.borderWidth + "px", marginLeft: c.cuspShift });
            popCuspInner.css({ borderTopWidth: innerTop, borderTopStyle: "solid", borderTopColor: c.backColor, borderRightWidth: innerWidth, borderRightStyle: "solid", borderRightColor: "transparent", top: "-" + c.cuspLength + "px", left: c.borderWidth + "px" });
            popMsg.css({ width: c.contentWidth + 2 * c.borderWidth, height: c.contentHeight + c.borderWidth + c.cuspLength, top: (f.top - c.contentHeight - c.cuspLength) + "px", left: msgLeft });
        }
        if (c.cuspStyle == 2) {//2:topright
            popCusp.css({ borderTopWidth: c.cuspLength + "px", borderTopStyle: "solid", borderTopColor: c.borderColor, borderLeftWidth: c.cuspWidth + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginTop: "-" + c.borderWidth + "px", marginLeft: c.cuspShift });
            popCuspInner.css({ borderTopWidth: innerTop, borderTopStyle: "solid", borderTopColor: c.backColor, borderLeftWidth: innerWidth, borderLeftStyle: "solid", borderLeftColor: "transparent", top: "-" + c.cuspLength + "px", left: "-" + (c.cuspWidth - c.borderWidth) + "px" });
            popMsg.css({ width: c.contentWidth + 2 * c.borderWidth, height: c.contentHeight + c.borderWidth + c.cuspLength, top: (f.top - c.contentHeight - c.cuspLength) + "px", left: msgLeft });
        }
        if (c.cuspStyle == 3) {//3:bottomleft
            popCusp.css({ borderBottomWidth: c.cuspLength + "px", borderBottomStyle: "solid", borderBottomColor: c.borderColor, borderRightWidth: c.cuspWidth + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginTop: "-" + c.borderWidth + "px", marginLeft: c.cuspShift });
            popCuspInner.css({ borderBottomWidth: innerTop, borderBottomStyle: "solid", borderBottomColor: c.backColor, borderRightWidth: innerWidth, borderRightStyle: "solid", borderRightColor: "transparent", top: (4 * c.borderWidth) + "px", left: c.borderWidth + "px" });
            popMsg.css({ width: c.contentWidth + 2 * c.borderWidth, height: c.contentHeight + c.borderWidth + c.cuspLength, top: (f.top + o.height()) + "px", left: msgLeft });
            popCusp.insertBefore(popContent);
        }
        if (c.cuspStyle == 4) {//4:bottomright
            popCusp.css({ borderBottomWidth: c.cuspLength + "px", borderBottomStyle: "solid", borderBottomColor: c.borderColor, borderLeftWidth: c.cuspWidth + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginTop: "-" + c.borderWidth + "px", marginLeft: c.cuspShift });
            popCuspInner.css({ borderBottomWidth: innerTop, borderBottomStyle: "solid", borderBottomColor: c.backColor, borderLeftWidth: innerWidth, borderLeftStyle: "solid", borderLeftColor: "transparent", top: (3 * c.borderWidth) + "px", left: "-" + (c.cuspWidth - c.borderWidth) + "px" });
            popMsg.css({ width: c.contentWidth + 2 * c.borderWidth, height: c.contentHeight + c.borderWidth + c.cuspLength, top: (f.top + o.height()) + "px", left: msgLeft });
            popCusp.insertBefore(popContent);
        }
        if (c.cuspStyle == 5) {//5:leftup
            popCusp.css({ float: "left", borderTopWidth: c.cuspWidth + "px", borderTopStyle: "solid", borderTopColor: c.borderColor, borderLeftWidth: c.cuspLength + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginLeft: "-" + c.borderWidth + "px", marginTop: (c.cuspWidth - 2 * c.borderWidth) + "px" });
            popCuspInner.css({ borderTopWidth: innerWidth, borderTopStyle: "solid", borderTopColor: c.backColor, borderLeftWidth: innerTop, borderLeftStyle: "solid", borderLeftColor: "transparent", top: "-" + (c.cuspWidth - c.borderWidth) + "px", left: "-" + (c.cuspLength - 4 * c.borderWidth) + "px" });
            popMsg.css({ width: c.contentWidth + c.borderWidth + c.cuspLength, height: c.contentHeight + 2 * c.borderWidth, top: msgLeft, left: (f.left + o.width() + c.cuspLength) + "px" });
            popContent.css({ float: "right" });
            popCusp.insertBefore(popContent);
        }
        if (c.cuspStyle == 6) {//6:leftdown
            popCusp.css({ float: "left", borderTopWidth: c.cuspWidth + "px", borderTopStyle: "solid", borderTopColor: c.borderColor, borderLeftWidth: c.cuspLength + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginLeft: "-" + c.borderWidth + "px", marginTop: (c.cuspWidth - 2 * c.borderWidth) + "px" });
            popCuspInner.css({ borderTopWidth: innerWidth, borderTopStyle: "solid", borderTopColor: c.backColor, borderLeftWidth: innerTop, borderLeftStyle: "solid", borderLeftColor: "transparent", top: "-" + (c.cuspWidth - c.borderWidth) + "px", left: "-" + (c.cuspLength - 4 * c.borderWidth) + "px" });
            popMsg.css({ width: c.contentWidth + c.borderWidth + c.cuspLength, height: c.contentHeight + 2 * c.borderWidth, top: msgLeft, left: (f.left + o.width()) + "px" }); //+ c.cuspLength
            popContent.css({ float: "right" });
            popCusp.insertBefore(popContent);
        }
        if (c.cuspStyle == 7) {//7:rightup
            popCusp.css({ float: "right", borderTopWidth: c.cuspWidth + "px", borderTopStyle: "solid", borderTopColor: c.borderColor, borderRightWidth: c.cuspLength + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginLeft: "-" + c.borderWidth + "px", marginTop: (c.cuspWidth - 2 * c.borderWidth) + "px" });
            popCuspInner.css({ borderTopWidth: innerWidth, borderTopStyle: "solid", borderTopColor: c.backColor, borderRightWidth: innerTop, borderRightStyle: "solid", borderRightColor: "transparent", top: "-" + (c.cuspWidth - c.borderWidth) + "px", left: "-" + c.borderWidth + "px" });
            popMsg.css({ width: c.contentWidth + c.borderWidth + c.cuspLength, height: c.contentHeight + 2 * c.borderWidth, top: msgLeft, left: (f.left - popContent.width() - c.cuspLength) + "px" });
            popContent.css({ float: "left" });
            popCusp.insertBefore(popContent);
        }
        if (c.cuspStyle == 8) {//8:rightdown
            popCusp.css({ float: "right", borderBottomWidth: c.cuspWidth + "px", borderBottomStyle: "solid", borderBottomColor: c.borderColor, borderRightWidth: c.cuspLength + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginLeft: "-" + c.borderWidth + "px", marginTop: (c.cuspWidth - 2 * c.borderWidth) + "px" });
            popCuspInner.css({ borderBottomWidth: innerWidth, borderBottomStyle: "solid", borderBottomColor: c.backColor, borderRightWidth: innerTop, borderRightStyle: "solid", borderRightColor: "transparent", top: c.borderWidth + "px", left: "-" + c.borderWidth + "px" });
            popMsg.css({ width: c.contentWidth + c.borderWidth + c.cuspLength, height: c.contentHeight + 2 * c.borderWidth, top: msgLeft, left: (f.left - popContent.width() - c.cuspLength) + "px" });
            popContent.css({ float: "left" });
            popCusp.insertBefore(popContent);
        }
    }
})(jQuery);