Use jQuery to change the default alert box _ jquery-js tutorial

This article describes how to use jquery to rewrite the style of the Alert pop-up box. It is very practical. We recommend it to you here. If you need it, you can refer to it. To change the frame, you must modify the built-in control winpop. The following is the specific code of winpop.

(Function (window, jQuery, undefined) {var HTMLS = {ovl :'
'+'
'+'
'+'
'+'
', Alert :'', Confirm :''+''} Function Winpop () {var config = {}; this. get = function (n) {return config [n];} this. set = function (n, v) {config [n] = v;} this. init ();} Winpop. prototype = {init: function () {this. createDom (); this. bindEvent () ;}, createDom: function () {var body = jQuery ("body"), ovl = jQuery ("# J_WinpopBox"); if (ovl. length = 0) {body. append (HTMLS. ovl);} this. set ("ovl", jQuery ("# J_WinpopBox"); this. Set ("mask", jQuery ("# J_WinpopMask") ;}, bindEvent: function () {var _ this = this, ovl = _ this. get ("ovl"), mask = _ this. get ("mask"); ovl. on ("click ",". j_AltBtn ", function (e) {_ this. hide () ;}); ovl. on ("click ",". j_CfmTrue ", function (e) {var cb = _ this. get ("confirmBack"); _ this. hide (); cb & cb (true) ;}); ovl. on ("click ",". j_CfmFalse ", function (e) {var cb = _ this. get ("confirmBack"); _ this. hide (); Cb & cb (false) ;}); mask. on ("click", function (e) {_ this. hide () ;}); jQuery (document ). on ("keyup", function (e) {var kc = e. keyCode, cb = _ this. get ("confirmBack"); if (kc = 27) {_ this. hide ();} else if (kc = 13) {_ this. hide (); if (_ this. get ("type") = "confirm") {cb & cb (true) ;}}) ;}, alert: function (str, btnstr) {var str = typeof str = 'string '? Str: str. toString (), ovl = this. get ("ovl"); this. set ("type", "alert"); ovl. find (". j_WinpopMain "cmd.html (str); if (typeof btnstr =" undefined ") {ovl. find (". j_WinpopBtns "cmd.html (HTMLS. alert);} else {ovl. find (". j_WinpopBtns "cmd.html (btnstr);} this. show () ;}, confirm: function (str, callback) {var str = typeof str === 'string '? Str: str. toString (), ovl = this. get ("ovl"); this. set ("type", "confirm"); ovl. find (". j_WinpopMain "cmd.html (str); ovl. find (". j_WinpopBtns "cmd.html (HTMLS. confirm); this. set ("confirmBack", (callback | function () {})); this. show () ;}, show: function () {this. get ("ovl "). show (); this. get ("mask "). show () ;}, hide: function () {var ovl = this. get ("ovl"); ovl. find (". j_WinpopMain "cmd.html (" "); ovl. find (". j_WinpopBtns "pai.html (" "); ovl. hide (); this. get ("mask "). hide () ;}, destory: function () {this. get ("ovl "). remove (); this. get ("mask "). remove (); delete window. alert; delete window. confirm ;}}; var obj = new Winpop (); window. alert = function (str) {obj. alert. call (obj, str) ;}; window. confirm = function (str, cb) {obj. confirm. call (obj, str, cb) ;};} (window, jQuery );

Then instantiate the object

Var obj = new Winpop (); // create a Winpop Instance Object // overwrite the alert control window. alert = function (str) {obj. alert. call (obj, str) ;}; // overwrite the confirm control window. confirm = function (str, cb) {obj. confirm. call (obj, str, cb );};

The following JS is indispensable