在项目过程中会遇到需要使用自己定义的弹出框的情况。以前用过ymprompt,但是它太复杂而且不好自己操控。所以自己写了一个弹出框实例。 主要有两类弹出框alert和confirm。基于jQuery alert([title,]des[,callback]): title: ...
在项目过程中会遇到需要使用自己定义的弹出框的情况。以前用过ymprompt,但是它太复杂而且不好自己操控。所以自己写了一个弹出框实例。
主要有两类弹出框alert和confirm。基于jQuery
alert([title,]des[,callback]):
title: 弹出框标题,string类型,可选
des: 弹出框内容描述,string类型,必须
callback: 弹出框点击按钮后的回调函数,可选
效果图如下
confirm([title,]des,callback):
title: 弹出框标题,string类型,可选
des: 弹出框内容描述,string类型,必须
callback: 弹出框点击按钮后的回调函数,必须
效果图如下
处理上都比较简单,需要注意的有以下几点:
1.对传入参数的多样处理
2.完成初始化以后需要按钮上焦点
3.响应回调之前需要把弹出框隐藏起来。
4.由于我们自定义的弹出框,confirm不能使用if(confirm('确认?') == true){expression}这种方式而是使用回调来处理。
完整源码alert.js如下(可以根据需要自己做拓展)。
var confirmCallbacks = '';var alertCallbacks = '';/*至少一个参数des*/function alert(title,des,callback){ if(!title){ top.alert('请为alert函数输入正确的参数!'); return; }else if(!des){ des = title; title = '信息提示'; }else if(des && !callback){ if(typeof des == 'function'){ callback = des; des = title; title = '信息提示'; } } $('.xgalert .modal-header').addClass('warning') $('#alert_title').html(title); $('#alert_des').html(des); $('.btn.btn-warning').html('确定').show(); $('.btn.btn-primary').hide(); alertCallbacks = callback; $('.xgalert').addClass('active'); setTimeout(function(){$('.btn.btn-warning')[0].focus()},100);}//注意此处confirm不能使用if(confirm('确认?') == true){expression}这种方式,//只能把expression写到回调中//至少两个参数des,callbackfunction confirm(title,des,callback){ if(!title || !des){ top.alert('请为confirm函数输入正确的参数!'); return; }else if(!callback){ callback = des; des = title; title = '信息提示'; } $('.xgalert .modal-header').removeClass('warning') $('.xgalert').addClass('active') $('#alert_title').html(title); $('#alert_des').html(des); $('.btn.btn-warning').html('取消').show(); $('.btn.btn-primary').html('确定').show(); confirmCallbacks = callback; $('.xgalert').addClass('active') setTimeout(function(){$('.btn.btn-warning')[0].focus()},100);}$(function(){ $(document).on('click','.xgalert .btn.btn-warning',function(){ //必须要先关闭弹出框,然后在执行回调(防止回调中有对弹出框的处理导致显示错误) $('.xgalert').removeClass('active'); if(alertCallbacks){ alertCallbacks(); } alertCallbacks = ''; }).on('click','.xgalert .close',function(){ $('.xgalert').removeClass('active'); }).on('click','.xgalert .btn.btn-primary',function(){ //必须要先关闭弹出框,然后在执行回调(防止回调中有对弹出框的处理导致显示错误) $('.xgalert').removeClass('active'); if(confirmCallbacks){ confirmCallbacks(); }else{ alert('没有回调函数!') } confirmCallbacks = ''; });})window.alert = alert;window.confirm = confirm;
原标题:弹出框优化实例(alert和confirm)
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。