自定义alert，confirm，prompt事件，模仿window.alert()，confirm()，prompt()

css代码：

/*custom_alert and custom_confirm*/ 
.custom_popupFilterBg {width: 100%; height: 100%; background-color: #000; filter: alpha(opacity=60); opacity: 0.6; position: fixed; z-index: 12; }
.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; }
.custom_popupContent .custom_popupTipsText{font-size:20px;}
.custom_popupContent .custom_popupTipsText.alignLeft{text-align: left;}
.custom_popupContent .custom_popupBtnsContainer{text-align: center;margin-top:30px;}
.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; }
.custom_popupContent .custom_popupBtnsContainer input[type='button']:first-child{background-color: #1DA514;margin-right:10px;margin-right: 1rem;}
.custom_popupContent .custom_popupBtnsContainer input[value='Cancel']{border-color: #524C4C; background-color: #a0a0a0;}
.custom_popupContent .custom_popupBtnsContainer input[type='button']:first-child:hover{background-color:#22961A;}
.custom_popupContent .custom_popupBtnsContainer input[value='Cancel']:hover{background-color:#999;}
.custom_popupContent .custom_popupBtnsContainer input[type='button']:focus{border-color: #3ff;}
.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;}
.custom_popupContent input.inputTexts:focus{border-color: #666;}

jquery代码：

 

var oUtils = function(){

  //text为弹出的文字信息，timestamp为多长时间弹出框自动消失，callback为回调方法
 function _alertTips(text,timestamp,callback){
  var autoHideFlag = ((typeof(timestamp) !="undefined") && (timestamp!=null)) ?true:false;
 
  createTipsEvent("alert",text,callback,autoHideFlag);
 
  var $obj = $("#alert_popupContent");
  if($obj.siblings(".custom_popupContent").length>0){
   $obj.css("z-index","18");
   $obj.prev(".custom_popupFilterBg").css("z-index","18");
  }
  if(autoHideFlag){
   var _timer = setTimeout(removeCustomTips,timestamp);
   function removeCustomTips(){
    if($("#alert_popupBg").css("display")!= undefined){
     if(typeof(callback)!="undefined" && $.isFunction(callback)){
      callback();
     }
     $("#alert_popupBg,#alert_popupContent").fadeOut(1000,function(){
      $("#alert_popupBg,#alert_popupContent").remove();
     });
    }
    clearTimeout(_timer);
   };
  }
 }

 //text——>弹出的文字信息，confirmFun——>点击确认按钮之后执行的方法，cancelFun——>点击取消按钮之后执行的方法
 function _confirmTips(text,confirmFun,cancelFun){
  createTipsEvent("confirm",text,confirmFun,cancelFun);
 }
 
//text——>弹出的文字信息，confirmFun——>点击确认按钮之后执行的方法，cancelFun——>点击取消按钮之后执行的方法
 function _promptTips(text,confirmFun,cancelFun){
  createTipsEvent("prompt",text,confirmFun,cancelFun);
 }
 
 function createTipsEvent(typeFlag,text,confirmFun,lastParam){
  var    operateStr="";
  switch(typeFlag){
   case "alert":
    if(!lastParam){
     operateStr = '<div id="'+typeFlag+'_operateBtns" class="custom_popupBtnsContainer">\
         <input type="button" value="OK" id="'+typeFlag+'_sureBtn"/>\
        </div>';
    };
    break;
   case "confirm":
   case "prompt":
     operateStr='<div id="'+typeFlag+'_operateBtns"  class="custom_popupBtnsContainer">\
         <input type="button" value="OK" id="'+typeFlag+'_sureBtn"/>\
         <input type="button" value="Cancel" id="'+typeFlag+'_cancelBtn"/>\
        </div>';
    break;
  };
 
  var _html = '<div id="'+typeFlag+'_popupBg" class="custom_popupFilterBg"></div>\
    <div id="'+typeFlag+'_popupContent" class="custom_popupContent">\
        <div id="'+typeFlag+'_tipsText" class="custom_popupTipsText"></div>'+
     (typeFlag == "prompt"?'<input type="text" name="inputMsg"  class="inputTexts"/>':'')
     +operateStr+
    '</div>';
     
  $("body").prepend(_html);
  $("#"+typeFlag+"_tipsText").html(text);
  var $Obj = $("#"+typeFlag+"_popupContent");
  $Obj.animate({
   filter: "alpha(opacity=100)",
   opacity:"1",
   marginLeft:-($Obj.width()/2),
   marginTop:-($Obj.height()/2)
  },300);
 
  switch(typeFlag){
   case "alert":
   case "confirm":
    $("#"+typeFlag+"_operateBtns input[value='OK']").focus();
    break;
   case "prompt":
    $Obj.find("input[name='inputMsg']").focus();
    break;
  }
 
  $("#"+typeFlag+"_operateBtns").off("click","#"+typeFlag+"_sureBtn");
  $("#"+typeFlag+"_operateBtns").on("click","#"+typeFlag+"_sureBtn",function(){
    switch(typeFlag){
     case "alert":
     case "confirm":
      if(typeof(confirmFun)!="undefined" && $.isFunction(confirmFun)){
       confirmFun();
      }
      closeTips($(this).parent().parent(".custom_popupContent"));
      break;
     case "prompt":
      var _inputMsg = $.trim($Obj.find("input[name='inputMsg']").val());
      if(typeof(confirmFun)!="undefined" && $.isFunction(confirmFun)){
       if(confirmFun(_inputMsg)){
        closeTips($(this).parent().parent(".custom_popupContent"));
       };
      }
      break;
    }
  });
 
  $("#"+typeFlag+"_operateBtns").off("click","#"+typeFlag+"_cancelBtn");
  $("#"+typeFlag+"_operateBtns").on("click","#"+typeFlag+"_cancelBtn",function(){
   closeTips($(this).parent().parent(".custom_popupContent"));
   if(typeof(lastParam)!="undefined" && $.isFunction(lastParam)){
    lastParam();
   }
  });
 }
 
 
 function closeTips(obj){
  $(obj).prev(".custom_popupFilterBg").remove();
  $(obj).remove();
 }
 
 return{
  alertTips:function(text,timestamp,callback){
   _alertTips(text,timestamp,callback);
  },
  confirmTips:function(text,confirmFun,cancelFun){
   _confirmTips(text,confirmFun,cancelFun);
  },
  promptTips:function(text,confirmFun,cancelFun){
   _promptTips(text,confirmFun,cancelFun);
  } 
 }
}();

 

demo实例：

 

oUtils.alertTips("Please input the page number.",200,test);

//弹出框在0.2s后自动消失，然后调用test()方法，第二个和第三个参数是可选的


 oUtils.confirmTips("Would you like to delete this service?",confirmFun,cancelFun);


oUtils.promptTips("Please fill the email here:",function(email){
    if(email==""){
        // 什么都没输入
        oUtils.alertTips("Email cannot be empty.");
        return false;
    }else{
        //输入后点击确认执行操作的地方

        ......

　　　return true;
    }
},cancelFun);