jquery extension Prompt box

(function () {$.            MsgBox = {alert:function (title, msg) {generatehtml ("Alert", title, MSG); Btnok ();        Alert simply pops up the message, so there is no need to use the callback function callback Btnno ();            }, Confirm:function (title, MSG, callback) {generatehtml ("Confirm", title, MSG);            Btnok (callback);        Btnno ();        }}//Generate HTML var generatehtml = function (type, title, msg) {var _html = ""; _html + = ' <div id= "Mb_box" ></div><div id= "Mb_con" ><span id= "Mb_tit" > ' + title + ' </span> '        ;        _html + = ' <a id= "Mb_ico" >x</a><div id= "mb_msg" > ' + msg + ' </div><div id= ' mb_btnbox ' > ';        if (type = = "alert") {_html + = ' <input id= ' mb_btn_ok ' type= ' button ' value= ' OK '/> ';            } if (type = = "Confirm") {_html + = ' <input id= ' mb_btn_ok ' type= ' button ' value= ' OK '/> '; _html + = ' <input id= ' mb_btn_no ' type= ' button ' value= ' Cancel '/> ';        } _html + = ' </div></div> '; You must first add the _html to body, and then set the CSS style $ ("Body"). Append (_html);    Generatecss (); }//Generate CSS var generatecss = function () {$ ("#mb_box"). CSS ({width: ' 100% ', Height: ' 100% ', ZIndex : ' 99999 ', Position: ' Fixed ', filter: ' Alpha (opacity=60) ', BackgroundColor: ' Black ', Top: ' 0 ', left: ' 0 ', Opaci        Ty: ' 0.6 '}); $ ("#mb_con"). CSS ({zIndex: ' 999999 ', Width: ' 70% ', Position: ' Fixed ', backgroundcolor: ' White ', bord        Erradius: ' 15px '}); $ ("#mb_tit"). CSS ({display: ' Block ', fontSize: ' 14px ', color: ' #444 ', padding: ' 10px 15px ', Backgrou Ndcolor: ' #DDD ', Borderradius: ' 15px 15px 0 0 ', borderbottom: ' 3px solid #009BFE ', FontWeight: ' Bold '})        ; $ ("#mb_msg"). CSS ({padding: ' 20px ', lineheight: ' 20px ', BorderBottom: ' 1px dashed #DDD ', fontSize: '        13px '});          $ ("#mb_ico"). CSS ({  Display: ' Block ', Position: ' Absolute ', right: ' 10px ', Top: ' 9px ', border: ' 1px solid Gray ', Width: ' 18px ', h Eight: ' 18px ', textAlign: ' Center ', lineheight: ' 16px ', cursor: ' pointer ', Borderradius: ' 12px ', fontFamily: ' Micro        Soft Black '});        $ ("#mb_btnbox"). CSS ({margin: ' 15px 0 10px 0 ', textAlign: ' Center '});        $ ("#mb_btn_ok, #mb_btn_no"). CSS ({width: ' 85px ', Height: ' 30px ', Color: ' White ', border: ' None '});        $ ("#mb_btn_ok"). CSS ({backgroundcolor: ' #168bbb '});        $ ("#mb_btn_no"). CSS ({backgroundcolor: ' Gray ', marginleft: ' 20px '}); upper right corner Close button hover style $ ("#mb_ico"). Hover (function () {$ (this). CSS ({backgroundcolor: ' Red ', Color: ' White '}        );        }, Function () {$ (this). CSS ({backgroundcolor: ' #DDD ', Color: ' Black '});        }); var _widht = document.documentElement.clientWidth; Screen width var _height = document.documentElement.clientHeight;        Screen high var boxwidth = $ ("#mb_con"). width (); VaR boxheight = $ ("#mb_con"). Height ();    Let the Cue Box center $ ("#mb_con"). CSS ({top: (_height-boxheight)/2 + "px", Left: (_widht-boxwidth)/2 + "px"}); }//OK button event var Btnok = function (callback) {$ ("#mb_btn_ok"). Click (function () {$ ("#mb_box, #mb_co            N "). Remove ();            if (typeof (callback) = = ' function ') {callback ();    }        }); }//Cancel button event var Btnno = function () {$ ("#mb_btn_no, #mb_ico"). Click (function () {$ ("#mb_box, #mb_co        N "). Remove ();    }); }})();

　　

jquery extension Prompt box