弹出框优化实例（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,callback function 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>
