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