A self-encapsulated pure div + css pop-up bubble message box, divcss

A self-encapsulated pure div + css pop-up bubble message box, divcss

Many frameworks may have such pop-up bubble boxes, but I have never touched them. Now I need to use them, so I encapsulated one with jquery, which is completely composed of div + css and has good compatibility. Although not perfect, it can be used. This widget can redefine the style. You can adjust the style by passing the configuration parameters or modifying the default configuration parameters. In any case, it's just a matter of practice or a chance to give new people a reference to learning.

/** The default style of the pop-up bubble */var popmsgdefaconfig = {cuspStyle: "topleft", // the orientation of the relatively positioned dom object (topleft, topright, bottomleft, bottomright, leftup, leftdown, rightup, rightdown) cuspLength: 30, // cuspWidth: 15, // contentWidth: 160, // message text box width contentHeight: 60, // The height of the message text box, borderWidth: 2, // Border width, borderColor: "red", // border color, backColor: "# EC90F6", // cuspShift: "60% ", // when the tip is on or off the message content box, it refers to the Left shift. When the tip is on the left/right of the message content box, it refers to the top shift. ContentShift: "20%", // when the pop-up box is located on the top or bottom of the target box, it refers to the Left shift. When the pop-up box is located on the left or right of the target box, it refers to the top shift. TextStyle: 'color: blue; font-size: small; font-family: "Microsoft YaHei"; font-style: italic ;', // default text style/** configuration file merging */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 ;}}; /** Method for expanding the jquery object; */(function ($ ){ /** Method for disabling bubbles */$. fn. closePopMsg = function () {var popmsg = $ ("#" + $ (this ). attr ("id") + "_ PopMsg"); if (popmsg) {popmsg. remove () ;};/** pop-up Bubble Method * text: Message content to be displayed * popMsgConfig: Custom style * Example: $ ("# divUserName "). popMsg ("this is a prompt message" {backColor: "gray", borderColor: "white", cuspStyle: "topleft", borderWidth: 1}); */$. fn. popMsg = function (text, popMsgConfig) {var obj = $ (this); var id = ob J. attr ("id") | Math. random (); obj. attr ("id", id); obj. closePopMsg (); var config = popmsgdefaconfig config. merge (popMsgConfig); // cancel event bubbling // event. stopPropagation (); // border style var offset = obj. offset (); var popMsg = $ ("<div id = '" + id + "_ PopMsg 'style = 'position: fixed;'> </div> "); var popContent = $ ("<div id = '" + id + "_ content' style = 'vertical-align: middle; text-align: center; line-height: "+ config. content Height + "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 = '" + id + "_ Cusp 'style = 'width: 0; height: 0; position: relative; '> </div> "); var popCuspInner = $ (" <div id =' "+ id + "_ CuspInner '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}); popCuspInne R.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. cuspSty Le = "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. c Ss ({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}); po PCuspInner.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. cuspSt Yle = "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}); popCu SpInner.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. cuspWid Th-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) ;}} (jQuery );