jquery simulation Alert's window widget _jquery

Demo Address:

Http://runjs.cn/detail/miwszbne

Share Description:

The nth time to build the wheel, only for the simplest call, jquery simulation alert and Confirm's window plugin

Call Method:

$.alert (' your message ');

$.alert (' Your message ', function () {
 $.alert (' Click OK button ')
};

$.confirm (' your message ');

$.confirm (' Your message ', function (result) {
 if (result) {
  $.alert (' Click OK button ')
 }else{
  $.alert ( ' Click Cancel button '}
 }
)

In order to invoke the convenience, the CSS style is written directly in the JS, the compatibility aspect only tests IE8 and the chrome as well as Safari, also can.
IE8 no problem. Presumably other modern browsers should also be OK.

(function ($) {$.extend ({_isalert:0, alert:function () {if (arguments.length) {$._isalert=1;
      $.confirm.apply ($,arguments);
      }, Confirm:function () {var args=arguments; if (args.length&& (typeof args[0] = = ' string ') &&!$ (' #alert_overlay '). Length) {if (!$ (' #alert_style '). Length) $ (' body '). Append (' <style id= "Alert_style" type= "Text/css" > #alert_overlay {position:fixed;width:100%; Height:100%;top:0;left:0;z-index:999;background: #000; Filter:alpha (opacity=5); opacity:.05} #alert_msg {position: fixed;width:400px;margin-left:-201px;left:50%;top:20%;z-index:1000;border:1px solid #aaa; box-shadow:0 2px 15px Rgba (0,0,0,.3); background: #fff} #alert_content {Padding:20px;font-size:14px;text-align:left} #alert_ buttons{padding:10px;border-top:1px solid #aaa; text-align:right;box-shadow:0 1px 0 #fff inset;background: #eee-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none} #alert_ buttons. alert_btn{padding:5px 12px;margin:0 2px;border:1px solid #aaa; background: #eee; cursor:pointer;border-radius:2px;font-size:14px;outline:0;- Webkit-appearance:none} #alert_buttons. Alert_btn:hover{border-color: #bbb; box-shadow:0 1px 2px #aaa background: #eaeaea} #alert_buttons. alert_btn:active{box-shadow:0
        1px 2px #aaa inset;background: #e6e6e6}</style> '); var dialog=$ (' <div id= "Alert_overlay" ></div><div id= "alert_msg" ><div id= "alert_content" > ' + args[0]+ ' </div><div id= "alert_buttons" ><button class= "alert_btn alert_btn_ok" > OK </button>
        <button class= "Alert_btn alert_btn_cancel" > Cancel </button></div></div> ');
        if ($._isalert) Dialog.find ('. Alert_btn_cancel '). Hide ();
        Dialog.on (' ContextMenu ', function () {return! 1;
          ). On (' click ', '. Alert_btn_ok ', function () {dialog.remove ();
        if (typeof args[1]== ' function ') args[1].call ($,!0); ). On (' click ', '. Alert_btn_cancel ', function () {Dialog.remOve ();
        if (typeof args[1]== ' function ') args[1].call ($,!1);
      }). Appendto (' body ');
    } $._isalert=0;
}
  });

 })($);

The above is the entire contents of this article, I hope you can enjoy.