自己封装的一个纯div+css样式弹出泡泡消息框

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

/* 
 * js 对象合并 
 */
function extend(newObj, defaultObj) {
    var result = {};
    for (var p in defaultObj) { 
        result[p] = defaultObj[p];
        if (typeof (defaultObj[p]) == " function ") {
            defaultObj[p]();
        } else { 
            for (var q in newObj) { 
                if (p == q) {
                    result[p] = newObj[q];
                }
            }
        }
    } 
    return result;
}
/* 
 * 弹出泡泡的默认样式
 */
var popMsgDefaultConfig = {
    containner: $(document.body),  //相对定位的dom对象或对象的id.
    cuspStyle: "topleft",          //相对定位的dom对象方位(topleft,topright,bottomleft,bottomright,leftup,leftdown,rightup,rightdown)
    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;'
}
/* 
 * 弹出泡泡的方法
 * containner: 泡泡指向的dom对象id
 * text: 需要显示的消息内容
 * popMsgConfig： 自定义样式
 * Example: popMsgShow("divUserName", "这是一个提示消息" { backColor: "gray", borderColor: "white", cuspStyle: "topleft",borderWidth: 1});
 */
function popMsgShow(containner, text, popMsgConfig) {
    popMsgClose();
    var config = extend(popMsgConfig, popMsgDefaultConfig);
    //边框样式
    var obj = $("#" + containner);
    var offset = obj.offset();
    var popMsg = $("<div id='divPopMsg'style='position:fixed;' ></div>");
    var popContent = $("<div id='divContent' style='vertical-align:middle;text-align:center; line-height: " + config.contentHeight + "px;" + " height: " + config.contentHeight + "px" + "; width: " + config.contentWidth + "px" + "; border: " + config.borderColor + " solid;border-radius: 6px;background-color: " + config.backColor + "; " + config.textStyle + "'>" + text + "</div>");
    var popCusp = $("<div id='divCusp' style='width: 0; height: 0; position:relative;'></div>");
    var popCuspInner = $("<div id='divCuspInner' style='position: absolute;'></div>");
    popContent.css({ borderWidth: config.borderWidth + "px", borderColor: config.borderColor, backgroundColor: config.backColor });
    popCusp.append(popCuspInner);
    popMsg.append(popContent);
    if (config.cuspStyle == "topleft")
    {
        var innerTop = (config.cuspLength - 3*config.borderWidth) + "px";
        var innerWidth = (config.cuspWidth - 2*config.borderWidth) + "px";
        var msgLeft = (offset.left + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.width() * parseInt(config.contentShift) / 100)) + "px";
        popCusp.css({ borderTopWidth: config.cuspLength + "px", borderTopStyle: "solid", borderTopColor: config.borderColor, borderRightWidth: config.cuspWidth + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginTop: "-" + config.borderWidth + "px", marginLeft: config.cuspShift });
        popCuspInner.css({ borderTopWidth: innerTop, borderTopStyle: "solid", borderTopColor: config.backColor, borderRightWidth: innerWidth, borderRightStyle: "solid", borderRightColor: "transparent", top: "-" + config.cuspLength + "px", left: config.borderWidth + "px" });
        popMsg.css({ top: (offset.top - config.contentHeight - config.cuspLength) + "px", left: msgLeft });
        popMsg.append(popCusp);
    }
    if (config.cuspStyle == "topright") {
        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";
        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";
        var msgLeft = (offset.left + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.width() * parseInt(config.contentShift) / 100)) + "px";
        popCusp.css({ borderTopWidth: config.cuspLength + "px", borderTopStyle: "solid", borderTopColor: config.borderColor, borderLeftWidth: config.cuspWidth + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginTop: "-" + config.borderWidth + "px", marginLeft: config.cuspShift });
        popCuspInner.css({ borderTopWidth: innerTop, borderTopStyle: "solid", borderTopColor: config.backColor, borderLeftWidth: innerWidth, borderLeftStyle: "solid", borderLeftColor: "transparent", top: "-" + config.cuspLength + "px", left: "-" + (config.cuspWidth - config.borderWidth) + "px" });
        popMsg.css({ top: (offset.top - config.contentHeight - config.cuspLength) + "px", left: msgLeft });
        popMsg.append(popCusp);
    }
    if (config.cuspStyle == "bottomleft") {
        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";
        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";
        var msgLeft = (offset.left + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.width() * parseInt(config.contentShift) / 100)) + "px";
        popCusp.css({ borderBottomWidth: config.cuspLength + "px", borderBottomStyle: "solid", borderBottomColor: config.borderColor, borderRightWidth: config.cuspWidth + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginTop: "-" + config.borderWidth + "px", marginLeft: config.cuspShift });
        popCuspInner.css({ borderBottomWidth: innerTop, borderBottomStyle: "solid", borderBottomColor: config.backColor, borderRightWidth: innerWidth, borderRightStyle: "solid", borderRightColor: "transparent", top: (4 * config.borderWidth) + "px", left: config.borderWidth + "px" });
        popMsg.css({ top: (offset.top + obj.height()) + "px", left: msgLeft });
        popCusp.insertBefore(popContent);
    }
    if (config.cuspStyle == "bottomright") {
        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";
        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";
        var msgLeft = (offset.left + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.width() * parseInt(config.contentShift) / 100)) + "px";
        popCusp.css({ borderBottomWidth: config.cuspLength + "px", borderBottomStyle: "solid", borderBottomColor: config.borderColor, borderLeftWidth: config.cuspWidth + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginTop: "-" + config.borderWidth + "px", marginLeft: config.cuspShift });
        popCuspInner.css({ borderBottomWidth: innerTop, borderBottomStyle: "solid", borderBottomColor: config.backColor, borderLeftWidth: innerWidth, borderLeftStyle: "solid", borderLeftColor: "transparent", top: (3*config.borderWidth) + "px", left: "-" + (config.cuspWidth - config.borderWidth) + "px" });
        popMsg.css({ top: (offset.top + obj.height()) + "px", left: msgLeft });
        popCusp.insertBefore(popContent);
    }
    if (config.cuspStyle == "leftup") {
        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";
        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";
        var msgLeft = (offset.top + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.height() * parseInt(config.contentShift) / 100)) + "px";
        popCusp.css({ float: "left", borderTopWidth: config.cuspWidth + "px", borderTopStyle: "solid", borderTopColor: config.borderColor, borderLeftWidth: config.cuspLength + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginLeft: "-" + config.borderWidth + "px", marginTop: (config.cuspWidth - 2*config.borderWidth) + "px" });
        popCuspInner.css({ borderTopWidth: innerWidth, borderTopStyle: "solid", borderTopColor: config.backColor, borderLeftWidth: innerTop, borderLeftStyle: "solid", borderLeftColor: "transparent", top: "-" + (config.cuspWidth - config.borderWidth) + "px", left: "-" + (config.cuspLength - 4*config.borderWidth) + "px" });
        popMsg.css({ top: msgLeft, left: (offset.left + obj.width() + config.cuspLength) + "px" });
        popContent.css({float: "right"});
        popCusp.insertBefore(popContent);
    }
    if (config.cuspStyle == "leftdown") {
        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";
        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";
        var msgLeft = (offset.top + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.height() * parseInt(config.contentShift) / 100)) + "px";
        popCusp.css({ float: "left", borderTopWidth: config.cuspWidth + "px", borderTopStyle: "solid", borderTopColor: config.borderColor, borderLeftWidth: config.cuspLength + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginLeft: "-" + config.borderWidth + "px", marginTop: (config.cuspWidth - 2*config.borderWidth) + "px" });
        popCuspInner.css({ borderTopWidth: innerWidth, borderTopStyle: "solid", borderTopColor: config.backColor, borderLeftWidth: innerTop, borderLeftStyle: "solid", borderLeftColor: "transparent", top: "-" + (config.cuspWidth - config.borderWidth) + "px", left: "-" + (config.cuspLength - 4 * config.borderWidth) + "px" });
        popMsg.css({ top: msgLeft, left: (offset.left + obj.width() + config.cuspLength) + "px" });
        popContent.css({float: "right"});
        popCusp.insertBefore(popContent);
    }
    if (config.cuspStyle == "rightup") {
        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";
        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";
        var msgLeft = (offset.top + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.height() * parseInt(config.contentShift) / 100)) + "px";
        popCusp.css({ float: "right", borderTopWidth: config.cuspWidth + "px", borderTopStyle: "solid", borderTopColor: config.borderColor, borderRightWidth: config.cuspLength + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginLeft: "-" + config.borderWidth + "px", marginTop: (config.cuspWidth - 2 * config.borderWidth) + "px" });
        popCuspInner.css({ borderTopWidth: innerWidth, borderTopStyle: "solid", borderTopColor: config.backColor, borderRightWidth: innerTop, borderRightStyle: "solid", borderRightColor: "transparent", top: "-" + (config.cuspWidth - config.borderWidth) + "px", left: "-" + config.borderWidth + "px" });
        popMsg.css({ top: msgLeft, left: (offset.left - popContent.width() - config.cuspLength) + "px" });
        popContent.css({ float: "left" });
        popCusp.insertBefore(popContent);
    }
    if (config.cuspStyle == "rightdown") {
        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";
        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";
        var msgLeft = (offset.top + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.height() * parseInt(config.contentShift) / 100)) + "px";
        popCusp.css({ float: "right", borderBottomWidth: config.cuspWidth + "px", borderBottomStyle: "solid", borderBottomColor: config.borderColor, borderRightWidth: config.cuspLength + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginLeft: "-" + config.borderWidth + "px", marginTop: (config.cuspWidth - 2 * config.borderWidth) + "px" });
        popCuspInner.css({ borderBottomWidth: innerWidth, borderBottomStyle: "solid", borderBottomColor: config.backColor, borderRightWidth: innerTop, borderRightStyle: "solid", borderRightColor: "transparent", top: config.borderWidth + "px", left: "-" + config.borderWidth + "px" });
        popMsg.css({ top: msgLeft, left: (offset.left - popContent.width() - config.cuspLength) + "px" });
        popContent.css({ float: "left" });
        popCusp.insertBefore(popContent);
    }

    $(document.body).append(popMsg);
}     
/* 
 * 关闭泡泡的方法
 */
function popMsgClose() {
    var popmsg = $("#divPopMsg");
    if (popmsg) {
        $("#divPopMsg").remove();
    }
}