Own package of a pure Div+css style popup bubble message box

    Maybe a lot of frames have come with this pop bubble box, but I have not contacted, now need to use, so I encapsulated a, although not perfect, but already can use. This gizmo can be redefined by passing configuration parameters, or by modifying the default configuration parameters. Anyway, it's a practiced hand, or a chance to offer a reference to a new student.

/* * JS object merge */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;    /* * Pop bubble default style */var Popmsgdefaultconfig = {containner: $ (document.body),//ID of relative anchored DOM object or object.    Cuspstyle: "TopLeft",//relative positioning of DOM object Azimuth (Topleft,topright,bottomleft,bottomright,leftup,leftdown,rightup,rightdown) CUSPLENGTH:30,//Sharp Corner length cuspwidth:15,//Sharp width contentwidth:160,//Message text box            Width contentheight:60,//Message text box height Borderwidth:2,//Border width bordercolor: "Red", Border color BackColor: "#EC90F6",//Background color cuspshift: "60%",//sharp Corner on the message content box up/down, refers to the left displacement, the sharp corner is in the message content box left/right, refers to the upper displacement。    Contentshift: "20%",//pop-up box on the target frame/down, refers to the left displacement, the popup box in the Target box left/right, refers to the upper displacement. TextStyle: ' Color:blue; Font-size:small; font-family: "Microsoft Yahei"; font-style:italic; '} /* * Pop Bubble method * Containner: Bubble point DOM Object ID * Text: Message content to be displayed * Popmsgconfig: Custom style * Example:popmsgshow ("Divusername", "This is a A hint message "{backColor:" Gray ", BorderColor:" White ", Cuspstyle:" TopLeft ", borderwidth:1});    */function popmsgshow (Containner, text, popmsgconfig) {popmsgclose ();    var config = Extend (popmsgconfig, popmsgdefaultconfig);    Border Style 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 () * par        Seint (Config.contentshift)) + "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.c        Uspshift}); 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 () * par        Seint (Config.contentshift)) + "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 () * par Seint (config.contentShift) + "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)/+) + "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 () * par        Seint (Config.contentshift)) + "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-CONFI        G.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 () * par        Seint (Config.contentshift)) + "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 () * par        Seint (Config.contentshift)) + "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-co        Nfig.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 () * par        Seint (Config.contentshift)) + "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);}    /* * To close the Bubble method */function Popmsgclose () {var popmsg = $ ("#divPopMsg");    if (popmsg) {$ ("#divPopMsg"). Remove ();        }}

Own package of a pure Div+css style popup bubble message box