在項目過程當中會遇到須要使用本身定義的彈出框的狀況。之前用過ymprompt，可是它太複雜並且很差本身操控。因此本身寫了一個彈出框實例。javascript
主要有兩類彈出框alert和confirm。基於jQuerycss
alert([title,]des[,callback]):html
title: 彈出框標題，string類型，可選java
des: 彈出框內容描述，string類型，必須jquery
callback: 彈出框點擊按鈕後的回調函數，可選web
效果圖以下express
confirm([title,]des,callback)：app
title: 彈出框標題，string類型，可選ide
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>
若是以爲本文不錯，請點擊右下方【推薦】！