Self-coding jquery plugin implements analog alert and Confirm_jquery

Do not say anything, first picture, there is a picture of the truth:)

The vast majority of websites now do not have to take the alert and confirm, because the interface is too stiff. So this plugin is created ...

To see the implementation of the plug-in code bar:

(function () {$.
      MsgBox = {alert:function (title, msg) {generatehtml ("Alert", title, MSG); Btnok ();
    Alert is just a pop-up message, so it is not necessary 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= ' determines '/> ';
      } if (type = = "Confirm") {_html = ' <input id= ' mb_btn_ok ' type= ' button ' value= ' Determine '/> ';
    _html + = ' <input id= ' mb_btn_no "type=" button "value=" Cancel "/>";

    } _html + = ' </div></div> '; _html must be added to Bo firstDY, and then set the CSS style $ ("Body"). Append (_html);
  Generatecss (); //Generate CSS var generatecss = function () {$ ("#mb_box"). CSS ({width: ' 100% ', Height: ' 100% ', ZIndex: ' 99999 ', POS

    Ition: ' Fixed ', filter: ' Alpha (opacity=60) ', BackgroundColor: ' Black ', Top: ' 0 ', left: ' 0 ', opacity: ' 0.6 '};  $ ("#mb_con"). CSS ({zindex: ' 999999 ', Width: ' 400px ', Position: ' Fixed ', backgroundcolor: ' White ', Borderradius:

    ' 15px '});  $ ("#mb_tit"). CSS ({display: ' Block ', FontSize: ' 14px ', color: ' #444 ', padding: ' 10px 15px ', backgroundcolor: ' #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: ' blocks ', Position: ' Absolute ', right: ' 10px ', Top: ' 9px ', border: ' 1px solid Gray ', Width: ' 18px ', Height: ' 18px ', textAlign: ' Center ', lineheight: ' 16px ', cursor:' Pointer ', Borderradius: ' 12px ', fontFamily: ' Microsoft Ya-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 '});
    The function () {$ (this). CSS ({backgroundcolor: ' #DDD ', Color: ' Black '});

    }); var _widht = document.documentElement.clientWidth; Screen wide var _height = document.documentElement.clientHeight;
    Screen high var boxwidth = $ ("#mb_con"). width ();

    var boxheight = $ ("#mb_con"). Height ();
  Center The Tip Box $ ("#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_con"). Remove ();
      if (typeof (callback) = = ' function ') {callback ();
  }
    }); //Cancel button event var Btnno = function () {$ ("#mb_btn_no, #mb_ico"). Click (function () {$ (#mb_box, #mb_con). Remov
    E ();
  }); }
})();

HTML code structure as follows, JS inside the stitching is not intuitive, give the following:

<div id= "Mb_box" ></div>
<div id= "Mb_con" >
    <span id= "Mb_tit" >title</span> <a id= "Mb_ico" >x</a>
    <div id= "mb_msg" >msg</div>
    <div id= "Mb_btnbox" >
      <input id= "MB_BTN_OK" type= "button" value= "OK"/> <input id= "mb_btn_no"
      type= "button" value= "Cancel"/>
    </div>
</div>

Mb_box is a semitransparent mask layer, covering the entire page, prohibiting operation; Mb_con is a hint box. The reason for not putting Mb_con in the Mb_box is because if you put it inside, the transparency of Mb_box will affect the Mb_con, so that Mb_con will become transparent. Also tried Background-color:rgba () before, unfortunately IE8 and the following version do not support. So still take the mb_con to the outside, by setting the Z-index to make it mb_box above.

In order to make plug-ins easy to use, deliberately did not use the picture, all through the CSS to control the effect of the interface, use, a reference to a JS file on it. CSS style in JS written dead, this may not be flexible, but the use is very convenient if you are not satisfied with the interface style or the color style of your site is inconsistent, it can only be modified.

Because the pop-up layer (DIV) does not do the page blocking effect like the original alert and confirm, it can only be emulated by a callback function. For this reason, background data operations can only be done with Ajax with the callback function.

Demo as follows:

The amount of code is not much, if you have any questions you can leave a message:)