Write your own jquery plugin for analog alert and confirm

Don't say anything, first, there is a picture of the truth:)

Most websites now do not have to bring their own alert and confirm, because the interface is too stiff. So this plugin was created ...

Let's look at the implementation code of the plugin:

(function () {    $. MsgBox={Alert:function(title, msg) {generatehtml ("Alert", title, MSG);  Btnok ();        //alert only 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    vargeneratehtml =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    varGeneratecss =function () {        $("#mb_box"). CSS ({width: ' 100% ', Height: ' 100% ', ZIndex: ' 99999 ', Position: ' 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: ' block ', 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 ') }); }, function () {            $( This). CSS ({backgroundcolor: ' #DDD ', Color: ' Black ' });        }); var_WIDHT = Document.documentElement.clientWidth;//Screen Width        var_height = Document.documentElement.clientHeight;//Screen Height        varBoxwidth = $ ("#mb_con"). width (); varBoxheight = $ ("#mb_con"). Height (); //to center the Cue box$ ("#mb_con"). CSS ({top: (_height-boxheight)/2 + "px", Left: (_widht-boxwidth)/2 + "px") }); }    //Determining button Events    varBtnok =function(callback) {$ ("#mb_btn_ok"). Click (function () {            $("#mb_box, #mb_con"). Remove (); if(typeof(callback) = = ' function ') {callback ();    }        }); }    //Cancel Button Event    varBtnno =function () {        $("#mb_btn_no, #mb_ico"). Click (function () {            $("#mb_box, #mb_con"). Remove ();    }); }})();

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

<DivID= "Mb_box"></Div><DivID= "Mb_con">        <spanID= "Mb_tit">Title</span><aID= "Mb_ico">X</a>        <DivID= "Mb_msg">Msg</Div>        <DivID= "Mb_btnbox">            <inputID= "MB_BTN_OK"type= "button"value= "OK" />            <inputID= "Mb_btn_no"type= "button"value= "Cancel" />        </Div></Div>

Mb_box is a translucent mask layer, the entire page is obscured, the operation is forbidden, Mb_con is the prompt box. The reason why do not put Mb_con in Mb_box inside, because if put inside, the mb_box set of transparency will affect the mb_con, so Mb_con will become transparent. I have tried Background-color:rgba () before, but IE8 and the following versions are not supported. So the Mb_con to get out, by setting Z-index to make it mb_box the top.

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

Because the popup layer (DIV) cannot do the page blocking effect like the original alert and confirm, it can only be simulated by a callback function. For this reason, background data operations can only be done with the callback function with Ajax.

The demo is as follows:

<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head>    <title>Simulate alert and confirm prompt boxes</title></Head><Body>    <inputID= "Add"type= "button"value= "Add" />    <inputID= "Delete"type= "button"value= "Delete" />    <inputID= "Update"type= "button"value= "Modify" />    <Scriptsrc=".. /js/jquery-1.4.1.min.js "type= "Text/javascript"></Script>    <Scriptsrc=".. /js/jquery.similar.msgbox.js "type= "Text/javascript"></Script>    <Scripttype= "Text/javascript">        $("#add"). Bind ("Click", function () {            $. Msgbox.alert ("message", "haha, add success! ");        }); //The callback function can write directly to the method function () {}        $("#delete"). Bind ("Click", function () {            $. Msgbox.confirm ("Warm Tips", "will not recover after performing the delete, OK to continue? Warm Tips", function() {alert ("you actually deleted the ...");        });        }); functionTest () {alert ("you clicked OK and made a change"); }        //You can also pass the method name test        $("#update"). Bind ("Click", function () {            $. Msgbox.confirm ("Warm Tips", "are you sure you want to make changes? ", test);        }); // Of course you can also not give the callback function, click OK after doing nothing, just close the popup layer
$ ("#update"). Bind ("click", Function () {$). Msgbox.confirm ("Warm Tip", "Are you sure you want to make changes?") "); });
    </Script></Body></HTML>

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

Write your own jquery plugin for analog alert and confirm