自定义alert，confirm，prompt事件，模仿window.alert()，confirm()，prompt()
css代码：
1 /*custom_alert and custom_confirm*/ 2 .custom_popupFilterBg {width: 100%; height: 100%; background-color: #000; filter: alpha(opacity=60); opacity: 0.6; position: fixed; z-index: 12; } 3 .custom_popupContent{position: fixed; left: 50%; top: 40%; z-index: 15; filter: alpha(opacity=0); opacity: 0;background-color: #585858; padding: 30px 30px; border: 4px solid #ccc; border-radius: 10px; min-width: 180px; max-width:600px;text-align: center; } 4 .custom_popupContent .custom_popupTipsText{font-size:20px;} 5 .custom_popupContent .custom_popupTipsText.alignLeft{text-align: left;} 6 .custom_popupContent .custom_popupBtnsContainer{text-align: center;margin-top:30px;} 7 .custom_popupContent .custom_popupBtnsContainer input[type='button']{border: 1px solid #0F620A; color: #fff; cursor: pointer; height: 28px; line-height: 28px; font-size: 12px;min-width: 68px; border-radius: 4px; } 8 .custom_popupContent .custom_popupBtnsContainer input[type='button']:first-child{background-color: #1DA514;margin-right:10px;margin-right: 1rem;} 9 .custom_popupContent .custom_popupBtnsContainer input[value='Cancel']{border-color: #524C4C; background-color: #a0a0a0;} 10 .custom_popupContent .custom_popupBtnsContainer input[type='button']:first-child:hover{background-color:#22961A;} 11 .custom_popupContent .custom_popupBtnsContainer input[value='Cancel']:hover{background-color:#999;} 12 .custom_popupContent .custom_popupBtnsContainer input[type='button']:focus{border-color: #3ff;} 13 .custom_popupContent input.inputTexts{width: 98%;height: 24px;line-height: 24px;background-color: #f3f3f3;border:1px solid #d3d3d3;margin-top: 15px;text-indent: 0.5em;font-size: 12px;} 14 .custom_popupContent input.inputTexts:focus{border-color: #666;}
jquery代码：
1 var oUtils = function(){ 2 3 //text为弹出的文字信息，timestamp为多长时间弹出框自动消失，callback为回调方法 4 function _alertTips(text,timestamp,callback){ 5 var autoHideFlag = ((typeof(timestamp) !="undefined") && (timestamp!=null)) ?true:false; 6 7 createTipsEvent("alert",text,callback,autoHideFlag); 8 9 var $obj = $("#alert_popupContent"); 10 if($obj.siblings(".custom_popupContent").length>0){ 11 $obj.css("z-index","18"); 12 $obj.prev(".custom_popupFilterBg").css("z-index","18"); 13 } 14 if(autoHideFlag){ 15 var _timer = setTimeout(removeCustomTips,timestamp); 16 function removeCustomTips(){ 17 if($("#alert_popupBg").css("display")!= undefined){ 18 if(typeof(callback)!="undefined" && $.isFunction(callback)){ 19 callback(); 20 } 21 $("#alert_popupBg,#alert_popupContent").fadeOut(1000,function(){ 22 $("#alert_popupBg,#alert_popupContent").remove(); 23 }); 24 } 25 clearTimeout(_timer); 26 }; 27 } 28 } 29 30 //text——>弹出的文字信息，confirmFun——>点击确认按钮之后执行的方法，cancelFun——>点击取消按钮之后执行的方法 31 function _confirmTips(text,confirmFun,cancelFun){ 32 createTipsEvent("confirm",text,confirmFun,cancelFun); 33 } 34 35 //text——>弹出的文字信息，confirmFun——>点击确认按钮之后执行的方法，cancelFun——>点击取消按钮之后执行的方法 36 function _promptTips(text,confirmFun,cancelFun){ 37 createTipsEvent("prompt",text,confirmFun,cancelFun); 38 } 39 40 function createTipsEvent(typeFlag,text,confirmFun,lastParam){ 41 var operateStr=""; 42 switch(typeFlag){ 43 case "alert": 44 if(!lastParam){ 45 operateStr = '<div > 46 <input type="button" value="OK" /> 47 </div>'; 48 }; 49 break; 50 case "confirm": 51 case "prompt": 52 operateStr='<div > 53 <input type="button" value="OK" /> 54 <input type="button" value="Cancel" /> 55 </div>'; 56 break; 57 }; 58 59 var _html = '<div ></div> 60 <div > 61 <div ></div>'+ 62 (typeFlag == "prompt"?'<input type="text" name="inputMsg" class="inputTexts"/>':'') 63 +operateStr+ 64 '</div>'; 65 66 $("body").prepend(_html); 67 $("#"+typeFlag+"_tipsText").html(text); 68 var $Obj = $("#"+typeFlag+"_popupContent"); 69 $Obj.animate({ 70 filter: "alpha(opacity=100)", 71 opacity:"1", 72 marginLeft:-($Obj.width()/2), 73 marginTop:-($Obj.height()/2) 74 },300); 75 76 switch(typeFlag){ 77 case "alert": 78 case "confirm": 79 $("#"+typeFlag+"_operateBtns input[value='OK']").focus(); 80 break; 81 case "prompt": 82 $Obj.find("input[name='inputMsg']").focus(); 83 break; 84 } 85 86 $("#"+typeFlag+"_operateBtns").off("click","#"+typeFlag+"_sureBtn"); 87 $("#"+typeFlag+"_operateBtns").on("click","#"+typeFlag+"_sureBtn",function(){ 88 switch(typeFlag){ 89 case "alert": 90 case "confirm": 91 if(typeof(confirmFun)!="undefined" && $.isFunction(confirmFun)){ 92 confirmFun(); 93 } 94 closeTips($(this).parent().parent(".custom_popupContent")); 95 break; 96 case "prompt": 97 var _inputMsg = $.trim($Obj.find("input[name='inputMsg']").val()); 98 if(typeof(confirmFun)!="undefined" && $.isFunction(confirmFun)){ 99 if(confirmFun(_inputMsg)){ 100 closeTips($(this).parent().parent(".custom_popupContent")); 101 }; 102 } 103 break; 104 } 105 }); 106 107 $("#"+typeFlag+"_operateBtns").off("click","#"+typeFlag+"_cancelBtn"); 108 $("#"+typeFlag+"_operateBtns").on("click","#"+typeFlag+"_cancelBtn",function(){ 109 closeTips($(this).parent().parent(".custom_popupContent")); 110 if(typeof(lastParam)!="undefined" && $.isFunction(lastParam)){ 111 lastParam(); 112 } 113 }); 114 } 115 116 117 function closeTips(obj){ 118 $(obj).prev(".custom_popupFilterBg").remove(); 119 $(obj).remove(); 120 } 121 122 return{ 123 alertTips:function(text,timestamp,callback){ 124 _alertTips(text,timestamp,callback); 125 }, 126 confirmTips:function(text,confirmFun,cancelFun){ 127 _confirmTips(text,confirmFun,cancelFun); 128 }, 129 promptTips:function(text,confirmFun,cancelFun){ 130 _promptTips(text,confirmFun,cancelFun); 131 } 132 } 133 }();
demo实例：
1 oUtils.alertTips("Please input the page number.",200,test); 2 3 //弹出框在0.2s后自动消失，然后调用test()方法，第二个和第三个参数是可选的 4 5 6 oUtils.confirmTips("Would you like to delete this service?",confirmFun,cancelFun); 7 8 9 oUtils.promptTips("Please fill the email here:",function(email){ 10 if(email==""){ 11 // 什么都没输入 12 oUtils.alertTips("Email cannot be empty."); 13 return false; 14 }else{ 15 //输入后点击确认执行操作的地方 16 17 ...... 18 19 return true; 20 } 21 },cancelFun);