alert提示框由於外觀不太友好，所以一般都不用alert了。

　　我在這裏使用bootstrap的樣式，寫了一個可以單獨顯示消息，也可以確認取消的提示框。

　　使用的外觀如下：

　　一：單獨顯示消息：

　　二：確認和取消：

　　單獨顯示消息的方法傳遞類型，信息，顯示時間以及回掉函數。其中通過重載可以只傳遞信息。

　　確認和取消的方法傳遞類型，信息以及回掉函數。其中可以通過重載可以只傳遞信息和確認後執行的回掉函數。如果點擊取消就去隱藏該提示框。

　　下面是代碼：

 1 //success   成功
 2 //info      信息
 3 //warning   警告
 4 //danger    錯誤！
 

 5 function alertBox(type, msg, showTime, callBack) {
 6     var divCss = "alert alert-" + type + " alert-dismissable";
 7     if (showTime == null) showTime = 3000;
 8     var divAlertBox;
 9     if ($("#divAlertBox").length != 0) {
10         $("#divAlertBox span").text(msg);
11         divAlertBox = $("#divAlertBox");
 
12         divAlertBox.removeClass().addClass(divCss).slideDown(1000);
13     } else {
14         divAlertBox = $("<div id=‘divAlertBox‘ style=‘display:none;position:fixed;z-index:9999;‘ class=‘" + divCss + "‘><button type=‘button‘ class=‘close‘ data-dismiss=‘alert‘ aria-hidden=‘true‘>&times;</button><span>" + msg + "</span></div>");
 
15         $("body").append(divAlertBox);
16         divAlertBox.slideDown(1000);
17         box(divAlertBox);
18     }
19     setTimeout(function () {
20         divAlertBox.fadeOut(1000);
21         if (callBack != null) {
22             callBack();
23         }
24     }, showTime);
25 }
26 
27 function alertSuccess(msg, showTime, callBack) {
28     alertBox("success", msg, showTime, callBack);
29 }
30 
31 function alertInfo(msg, showTime, callBack) {
32     alertBox("info", msg, showTime, callBack);
33 }
34 
35 function alertWarning(msg, showTime, callBack) {
36     alertBox("warning", msg, showTime, callBack);
37 }
38 
39 function alertDanger(msg, showTime, callBack) {
40     alertBox("danger", msg, showTime, callBack);
41 }
42 
43 //必傳入回掉函數
44 function confirmBox(type, msg, callBack) {
45     var divCss = "alert alert-" + type;
46     var divConfirmBox;
47     if ($("#divConfirmBox").length != 0) {
48         $("#divConfirmBox span").text(msg);
49         divConfirmBox = $("#divConfirmBox");
50         divConfirmBox.removeClass().addClass(divCss).slideDown(1000);
51         divConfirmBox.find("button:first")[0].onclick = callBack;
52     } else {
53         divConfirmBox = $("<div id=‘divConfirmBox‘ style=‘display:none;position:fixed;z-index:9999;‘ class=‘" + divCss + "‘><span>" + msg + "</span><br/></div>");
54         var btnYes = $("<button style=‘margin-top:20px;margin-right:50px;‘ type=‘button‘ class=‘btn btn-warning‘>確定</button>");
55         var btnNo = $("<button style=‘margin-top:20px;‘ type=‘button‘ class=‘btn btn-primary‘  onclick=‘confirmBoxHide()‘>取消</button>");
56         btnYes[0].onclick = callBack;
57         divConfirmBox.append(btnYes).append(btnNo);
58         $("body").append(divConfirmBox);
59         divConfirmBox.slideDown(1000);
60         box(divConfirmBox);
61     }
62 }
63 
64 function confirmSuccess(msg, callBack) {
65     confirmBox("success", msg, callBack);
66 }
67 
68 function confirmInfo(msg, callBack) {
69     confirmBox("info", msg, callBack);
70 }
71 
72 function confirmWarning(msg, callBack) {
73     confirmBox("warning", msg, callBack);
74 }
75 
76 function confirmDanger(msg, callBack) {
77     confirmBox("danger", msg, callBack);
78 }
79 
80 function confirmBoxHide() {
81     $("#divConfirmBox").fadeOut(1000);
82 }
83 
84 function box(jqObj) {
85     //獲取DIV為‘box’的盒子
86     var oBox = jqObj[0];
87     //獲取元素自身的寬度
88     var L1 = oBox.clientWidth;
89     //獲取元素自身的高度
90     var H1 = oBox.clientHeight;
91     //獲取實際頁面的left值。（頁面寬度減去元素自身寬度/2）
92     var Left = (document.documentElement.clientWidth - L1) / 2;
93     //獲取實際頁面的top值。（頁面寬度減去元素自身高度/2）
94     var top = (document.documentElement.clientHeight - H1) / 4;
95     oBox.style.left = Left + ‘px‘;
96     oBox.style.top = top + ‘px‘;
97 }

　　提示框的應該設置為模式對話框形式，目前還沒有完善。

替代alert的消息框和提示框