您的位置:首页 > 其它

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

2015-10-29 14:27 501 查看
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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: