Jquery simulates the alert pop-up window plug-in and jqueryalert pop-up window

Jquery simulates the alert pop-up window plug-in and jqueryalert pop-up window

Demo address:

Http://runjs.cn/detail/miwszbne

Sharing instructions:

The Nth wheel was created, only for the simplest call. jquery simulates the pop-up window plug-ins of alert and confirm.

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') }})

For ease of calling, the css style is directly written in js. In terms of compatibility, only IE8, chrome, and safari are tested.
IE8 is okay. 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: 20 Px; 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} # aler T_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 _ Cancel "> cancel </button> </div> '); if ($. _ isalert) dialog. find ('. alert_btn_cancel '). hide (); dialog. on ('textmenu ', 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 all the content of this article. I hope you will like it.