你的位置:首页 > 网页设计

[网页设计]弹出框优化实例(alert和confirm)


  在项目过程中会遇到需要使用自己定义的弹出框的情况。以前用过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;

  html与css代码如下,后面有一个例子,不过需要注意一点是alert、confirm是函数,连续调用最终只会呈现最后一次调用的结果。

<!DOCTYPE html><html lang="ch-cn"> <head>  <meta charset="utf-8">  <script type="text/javascript" src='jquery-1.9.1.js'></script>  <script type="text/javascript" src='alert.js'></script>  <style type="text/css">  html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{   margin: 0;   padding:0;  }  *{   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;  }  body{   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  }  .xgalert{    height: 100%;    width: 100%;    position: fixed;    top: 0px;    display: none;    z-index: 10000 !important;  }  .xgalert.active{   display: block;  }  .xgalert .modal-preview{    position: fixed;    height: 100%;    width: 100%;    background: #000;    background: rgba(0,0,0,0.5);    filter: alpha(opacity=50);    /*z-index: 100000;使用这种方式实现ie8半透明用了position: fixed/absolute/relative;就不能使用z-index*/  }  .xgalert .modal-preview .modal{    top: 50%;    position: relative;    margin-top: -114px;    margin-left: auto;    margin-right: auto;    width: 450px;    display: block;    overflow: hidden;  }  .modal-preview .modal .modal-dialog {    width: 90%;    margin: 30px auto;    position: relative;  }  .modal-content {    -webkit-border-radius: 0;    -webkit-background-clip: padding-box;    -moz-border-radius: 0;    -moz-background-clip: padding;    border-radius: 0;    background-clip: padding-box;    -webkit-box-shadow: 0 0 40px rgba(0,0,0,.5);    -moz-box-shadow: 0 0 40px rgba(0,0,0,.5);    box-shadow: 0 0 40px rgba(0,0,0,.5);    color: #000;    background-color: #fff;    border: rgba(0,0,0,0);  }  .modal-header {    min-height: 16.43px;    padding: 10px 15px 10px 20px;    background-color: #f5f5f5;  }  .modal-primary .modal-header {    border-bottom: 3px solid #4374e0;  }  .warning {    border-bottom: 3px solid #c2002d!important;    color: #f4b400!important;  }  .close {    float: right;    font-size: 26px;    font-weight: 700;    line-height: 1;    color: #000;    text-shadow: 0 1px 0 #fff;    filter: alpha(opacity=20);    opacity: .2;    font-family: inherit;  }  button.close {    -webkit-appearance: none;    padding: 0;    cursor: pointer;    background: 0 0;    border: 0;  }  .modal-title {    margin: 0;    line-height: 1.42857143;    font-family: inherit;    font-weight: 500;  }  .modal-body {    position: relative;    padding: 15px;  }  p {    line-height: 22px;    margin: 0 0 10px;  }  .modal-footer {    padding-top: 12px;    padding-bottom: 14px;    border-top: 0;    background-color: #f5f5f5;    padding: 15px;    text-align: right;  }  .btn {    cursor: pointer;    vertical-align: middle;    margin: 0;    position: relative;    display: inline-block;    color: #fff;    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);    -moz-box-shadow: 0 1px 0 rgba(0,0,0,.05);    box-shadow: 0 1px 0 rgba(0,0,0,.05);    -webkit-transition: all .15s ease;    -moz-transition: all .15s ease;    -o-transition: all .15s ease;    transition: all .15s ease;    -webkit-border-radius: 2px;    -webkit-background-clip: padding-box;    -moz-border-radius: 2px;    -moz-background-clip: padding;    border-radius: 2px;    background-clip: padding-box;    font-size: 13px;    font-family: inherit;    font-weight: 400;    line-height: 1.42857143;    text-align: center;    white-space: nowrap;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    background-image: none;    border: 1px solid transparent;    -webkit-appearance: button;    color: #444;    padding: 6px 12px;  }  .btn-primary, .btn-primary:focus {    background-color: #427fed!important;    border-color: #427fed;    color: #fff;  }  .btn-warning, .btn-warning:focus {    background-color: #f4b400!important;    border-color: #f4b400;    color: #fff;  }  .modal-footer .btn+.btn {    margin-bottom: 0;    margin-left: 5px;  }  </style> </head> <body >  <div class='xgalert'>    <div class="modal-preview">      <div class="modal modal-primary">        <div class="modal-dialog">          <div class="modal-content">            <div class="modal-header">              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>              <h4 id='alert_title' class="modal-title"></h4>            </div>            <div class="modal-body">              <p id='alert_des'></p>            </div>            <div class="modal-footer">             <button type="button" class="btn btn-primary">确定</button>              <button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>            </div>          </div>        </div>      </div>    </div>  </div> </body> <script type="text/javascript"> alert("alert"); //alert("自定义标题","alert"); //alert("自定义标题","alert",function(){alert("这个是alert回调结果")}); //alert("alert",function(){alert("这个是alert回调结果")}); //confirm("confirm没有回调会提示错误"); //confirm("confirm没有回调会提示错误",function(){alert("这个是comfirm回调结果")}); //confirm("自定义标题","confirm没有回调会提示错误",function(){alert("这个是comfirm回调结果")}); </script> </html>

View Code

  

  如果觉得本文不错,请点击右下方【推荐】!