自定义alert,confirm,prompt事件,模仿window.alert(),confirm(),prompt()
2015-10-29 14:27
501 查看
css代码:
jquery代码:
demo实例:
/*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);
相关文章推荐
- Xcode 7 ATS设置
- js倒计时
- [转]iOS开发总结之代码规范
- GitHub秘籍
- java读取配置文件中的每一行并遍历
- UIApplication
- 横竖屏切换时候Activity的生命周期
- java性能优化的地方
- nginx配置详解
- 11.线性表之单链表的基本操作
- TRUNC函数,ORA-01898 精度说明符过多
- 线上应用故障排查之一:高CPU占用
- 【Mockplus教程】删除
- Android平台下利用zxing实现二维码开发
- MySQL备份方案(综述及脚本)
- 横竖屏切换时候Activity的生命周期
- Maven搭建hadoop环境报Missing artifact jdk.tools:jdk.tools:jar:1.8
- Exception in thread "main" java.lang.Error: Unresolved compilation problem
- JS原型与原型链终极详解(推荐阅读)
- c编程之代码优化总结