Javascript Code:
(function ($) { ' Use strict '; Window.alert= $.alert =function(msg) {varDefaultopts ={bodyclass:' Body-cover ', MainClass:' Main-cover ', Alertclass:' Alert-cover ' }; var_body = $ (' body ');//Body var_wrap = $ (' <div></div> ');//occlusion Layer var_covercotent = $ (' <div><div class= "alert-close" ><i class= "fa fa-close" ></i></div>< div class= "Content" ></div></div> "); _body.addclass (Defaultopts.bodyclass); //Set Body effect_body.append (_wrap);//Add occlusion Layer_wrap.addclass (Defaultopts.mainclass);//masking layers Adding styles_body.append (_covercotent);//Add Occlusion Content layer_covercotent.addclass (Defaultopts.alertclass);////Add Occlusion content layer style_covercotent.find ('. Content ')). Text (msg); _covercotent.fadein (' 500 '); //Click Occlusion Layer_wrap.unbind (). bind (' click ',function() {_close (); }); //Click the Close button$ (_covercotent.find (' I ')). Unbind (). bind (' click ',function() {_close (); }); var_close =function() {_covercotent.fadeout (' 300 ',function() {_body.removeclass (defaultopts.bodyclass);//Remove Bodycover style_wrap.remove ();//Masking Layer Removal_covercotent.remove ();//occlusion content Layer Removal }); } //timed DestructionSetTimeout (_close, 10000); }}) (JQuery);
CSS Code:
/*cover Body Style*/. Body-cover{Overflow:Hidden;}/*Wrap Style*/. Main-cover{position:fixed;Top:0;Bottom:0; Left:0; Right:0;Background-color:#000;Opacity:0.8;Filter:Alpha (opacity=80);}/*cover Content Style*/. Alert-cover{position:fixed;Z-index:99999;width:400px;Min-height:120px;Top:50%; Left:50%;Margin-top:-80px;Border-radius:6px;Margin-left:-200px;Border:1px solid #eee;Box-shadow:0 1px 10px 0 rgba (0, 0, 0, 0.5);Background-color: White;Display:None;}. Alert-cover. Alert-close{Height:30px;text-align: Right;cursor:Pointer;Padding-right:10px;}. Alert-cover. Content{text-align:Center;}
Effect:
Overwrite Alert dialog box-Homemade Jquery.alert Plugin