也许很多框架都自带了这样的弹出泡泡框，但我没接触过，现在需要用，于是便自己用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 = $("<div id='" + id + "_PopMsg'style='position:absolute;z-index:99;' ></div>").appendTo(document.body);
var popContent = $("<div id='" + id + "_Content' style='padding:10px 5px;word-wrap:break-word;word-break:normal;overflow:hidden;vertical-align:middle;text-align:center; " + (c.contentWidth - 10) + "px; border: " + c.borderColor + " solid;border-radius: 6px;background-color: " + c.backColor + "; " + c.textStyle + "'>" + text + "</div>").appendTo(popMsg);
var popCusp = $("<div id='" + id + "_Cusp' style=' 0; height: 0; position:relative;'></div>").appendTo(popMsg);
var popCuspInner = $("<div id='" + id + "_CuspInner' style='position: absolute;'></div>").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({ 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({ 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({ 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({ 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({ 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({ 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({ 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({ 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);