你的位置:首页 > 软件开发 > 网页设计 > 弹出框优化实例(alert和confirm)

弹出框优化实例(alert和confirm)

发布时间:2015-12-29 11:00:10
在项目过程中会遇到需要使用自己定义的弹出框的情况。以前用过ymprompt,但是它太复杂而且不好自己操控。所以自己写了一个弹出框实例。  主要有两类弹出框alert和confirm。基于jQuery alert([title,]des[,callback]):  title: ...

  在项目过程中会遇到需要使用自己定义的弹出框的情况。以前用过ymprompt,但是它太复杂而且不好自己操控。所以自己写了一个弹出框实例。

  主要有两类弹出框alert和confirm。基于jQuery

 

alert([title,]des[,callback]):

  title: 弹出框标题,string类型,可选

  des: 弹出框内容描述,string类型,必须

  callback: 弹出框点击按钮后的回调函数,可选

  效果图如下

  弹出框优化实例(alert和confirm)

  

confirm([title,]des,callback):

  title: 弹出框标题,string类型,可选

  des: 弹出框内容描述,string类型,必须

  callback: 弹出框点击按钮后的回调函数,必须

  效果图如下

  弹出框优化实例(alert和confirm)

  

  处理上都比较简单,需要注意的有以下几点:

  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 (#换成@)。

可能感兴趣文章

我的浏览记录