1 <%@ page contentType="text/html; charset=UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <title>alertifyjsDemo</title> 7 <!-- resource http://alertifyjs.com/guide.html --> 8 <!-- see http://alertifyjs.com/guide.html --> 9 <link rel="stylesheet" href="../component/alertifyjs/css/themes/bootstrap.min.css"> 10 <link rel="stylesheet" href="../component/alertifyjs/css/alertify.css"> 11 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 12 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700"> 13 <script src="../component/alertifyjs/alertify.js"></script> 14 <script type="text/javascript" src="../component/jquery-1.11.1.js"></script> 15 <script type="text/javascript"> 16 alertify.defaults.transition = "slide"; 17 alertify.defaults.theme.ok = "btn btn-primary"; 18 alertify.defaults.theme.cancel = "btn btn-danger"; 19 alertify.defaults.theme.input = "form-control"; 20 function interval(e){ 21 alertify.dismissAll(); 22 setCookie("a","c"); 23 } 24 //设置cookie 25 function setCookie(name, value) { 26 var Days = 30; 27 var exp = new Date(); 28 exp.setTime(exp.getTime() + Days*24*60*60*1000); 29 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 30 } 31 function getCookie(name){ 32 var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); 33 if(arr=document.cookie.match(reg)) 34 return unescape(arr[2]); 35 else 36 return null; 37 } 38 $(function(){ 39 $('#alert').click(function(){ 40 alertify.alert('Bootstrap'); 41 }); 42 43 $('#confirm').click(function(){ 44 alertify.confirm('Bootstrap'); 45 }); 46 47 $('#prompt').click(function(){ 48 alertify.prompt('Bootstrap'); 49 }); 50 51 $("#notify").click(function() { 52 alertify.notify('sample', 'success', 5, function(){ console.log('dismissed'); }); 53 }); 54 55 $("#alert1").click(function() { 56 var closable = alertify.alert().setting('closable'); 57 alertify.confirm('labels changed!') 58 .set('labels', {ok:'确定!', cancel:'取消!'}) 59 .set('onok', function(closeEvent){ alertify.success('Ok');}); ; 60 }); 61 62 $("#notify1").click(function() { 63 if(getCookie("a") != "c") { 64 var msg = alertify.message("<button onclick='interval("aaa");'>不再显示</button>", 100, function(){ }); 65 } 66 }); 67 }); 68 </script> 69 <style type="text/css"> 70 body { 71 font-family:"Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif; 72 -webkit-overflow-scrolling: touch; 73 } 74 .btn{ 75 margin: .25em; 76 } 77 </style> 78 </head> 79 <body> 80 ----------基本功能----------------- 81 <div style="text-align:center;padding:40px;"> 82 <a id="alert" class="btn btn-primary btn-lg"> 83 Alert 84 </a> 85 86 <a id="confirm" class="btn btn-primary btn-lg"> 87 Confirm 88 </a> 89 90 <a id="prompt" class="btn btn-primary btn-lg"> 91 Prompt 92 </a> 93 94 <a id="notify" class="btn btn-primary btn-lg"> 95 Notify 96 </a> 97 </div> 98 <hr> 99 100 <div style="text-align:center;padding:40px;"> 101 <a id="alert1" class="btn btn-primary btn-lg"> 102 alert1 103 </a> 104 105 <a id="notify1" class="btn btn-primary btn-lg"> 106 Notify1 107 </a> 108 </div> 109 110 </body> 111 </html>
公司使用插件，随便封装一下非常好用，这里我们预想做一个不再显示的功能，修改了alertify.js里面的一个create函数function clickDelegate，屏蔽了点击消失的功能，然后把这个alert记录到Cookie中，以后读取cookie有值则不再显示，
1 builder.append("window.ep.alert=function(msg,callback,cls){alertify.set({labels:{ok:'确定',cancel:'取消'},delay:2000,buttonReverse:true,buttonFocus:'ok'});alertify.alert(msg,callback,cls);}; "); 2 builder.append("window.ep.confirm=function(msg,callback,cls){alertify.set({labels:{ok:'确定',cancel:'取消'},delay:2000,buttonReverse:true,buttonFocus:'ok'});alertify.confirm(msg,callback,cls);}; "); 3 builder.append("window.ep.prompt=function(msg,defaultValue,callback,cls){alertify.set({labels:{ok:'确定',cancel:'取消'},delay:2000,buttonReverse:true,buttonFocus:'ok'});alertify.prompt(msg,function(e,str){callback.call(window, e?(!!str?str:''):null);},defaultValue,cls);}; "); 4 builder.append("window.ep.notify=function(msg,type,time){alertify.set({delay:2000});if(!time&&time!==0){time=2000;}if(type=='success'){alertify.success(msg,time);}else if(type=='error'){alertify.error(msg,time);}else{alertify.log(msg,type,time);}}; ");