也许很多框架都自带了这样的弹出泡泡框，但我没接触过，现在需要用，于是便自己封装了一个，虽然还不完美，但已经可以用了。这个小控件可以重定义样式，通过传递配置参数，或修改默认配置参数都可以进行样式调整。不管怎么说，就当是练手，或给新人提供一个参考学习的机会也行吧
/* * 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+css样式弹出泡泡消息框_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108044