alert提示框由於外觀不太友好，所以一般都不用alert了。 我在這裡使用bootstrap的樣式，寫了一個可以單獨顯示消息，也可以確認取消的提示框。 使用的外觀如下： 一：單獨顯示消息： 二：確認和取消： 單獨顯示消息的方法傳遞類型，信息，顯示時間以及回掉函數。其中通過重載可以只傳遞信息。 確認 ...
alert提示框由於外觀不太友好，所以一般都不用alert了。
我在這裡使用bootstrap的樣式，寫了一個可以單獨顯示消息，也可以確認取消的提示框，確認，取消的採用模式對話框方式，用一個div遮蓋了後面所有內容。
使用的外觀如下：
一：單獨顯示消息：
二：確認和取消：
單獨顯示消息的方法傳遞類型，信息，顯示時間以及回掉函數。其中通過重載可以只傳遞信息。
確認和取消的方法傳遞類型，信息以及回掉函數。其中可以通過重載可以只傳遞信息和確認後執行的回掉函數。如果點擊取消就去隱藏該提示框。
下麵是這個提示框的js代碼：
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 box(divAlertBox); 14 } else { 15 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'>×</button><span>" + msg + "</span></div>"); 16 $("body").append(divAlertBox); 17 divAlertBox.slideDown(1000); 18 box(divAlertBox); 19 } 20 setTimeout(function () { 21 divAlertBox.fadeOut(1000); 22 if (callBack != null) { 23 callBack(); 24 } 25 }, showTime); 26 } 27 28 function alertSuccess(msg, showTime, callBack) { 29 alertBox("success", msg, showTime, callBack); 30 } 31 32 function alertInfo(msg, showTime, callBack) { 33 alertBox("info", msg, showTime, callBack); 34 } 35 36 function alertWarning(msg, showTime, callBack) { 37 alertBox("warning", msg, showTime, callBack); 38 } 39 40 function alertDanger(msg, showTime, callBack) { 41 alertBox("danger", msg, showTime, callBack); 42 } 43 44 //必傳入回掉函數 45 function confirmBox(type, msg, callBack) { 46 var divCss = "alert alert-" + type; 47 var divConfirmBox; 48 if ($("#divConfirmBox").length != 0) { 49 var divConfirmBoxCover = $("#divConfirmBoxCover"); 50 divConfirmBoxCover.show(); 51 $("#divConfirmBox span").text(msg); 52 divConfirmBox = $("#divConfirmBox"); 53 divConfirmBox.removeClass().addClass(divCss).slideDown(1000); 54 divConfirmBox.find("button:first")[0].onclick = callBack; 55 box(divConfirmBox); 56 } else { 57 var divConfirmBoxCover = $("<div id='divConfirmBoxCover' style='position:fixed;top:0px;left:0px;z-index:9998;width:100%;height:100%;'><div>"); 58 divConfirmBox = $("<div id='divConfirmBox' style='display:none;position:fixed;z-index:9999;' class='" + divCss + "'><span>" + msg + "</span><br/></div>"); 59 var btnYes = $("<button style='margin-top:20px;margin-right:50px;' type='button' class='btn btn-warning'>確定</button>"); 60 var btnNo = $("<button style='margin-top:20px;float:right;' type='button' class='btn btn-primary' onclick='confirmBoxHide()'>取消</button>"); 61 btnYes[0].onclick = callBack; 62 divConfirmBox.append(btnYes).append(btnNo); 63 $("body").append(divConfirmBox).append(divConfirmBoxCover); 64 divConfirmBox.slideDown(1000); 65 box(divConfirmBox); 66 } 67 } 68 69 function confirmSuccess(msg, callBack) { 70 confirmBox("success", msg, callBack); 71 } 72 73 function confirmInfo(msg, callBack) { 74 confirmBox("info", msg, callBack); 75 } 76 77 function confirmWarning(msg, callBack) { 78 confirmBox("warning", msg, callBack); 79 } 80 81 function confirmDanger(msg, callBack) { 82 confirmBox("danger", msg, callBack); 83 } 84 85 function confirmBoxHide() { 86 $("#divConfirmBox").fadeOut(1000); 87 $("#divConfirmBoxCover").hide(); 88 } 89 90 function box(jqObj) { 91 //獲取DIV為‘box’的盒子 92 var oBox = jqObj[0]; 93 //獲取元素自身的寬度 94 var L1 = oBox.clientWidth; 95 //獲取元素自身的高度 96 var H1 = oBox.clientHeight; 97 //獲取實際頁面的left值。（頁面寬度減去元素自身寬度/2） 98 var Left = (document.documentElement.clientWidth - L1) / 2; 99 //獲取實際頁面的top值。（頁面寬度減去元素自身高度/2） 100 var top = (document.documentElement.clientHeight - H1) / 4; 101 oBox.style.left = Left + 'px'; 102 oBox.style.top = top + 'px'; 103 }
然後是測試頁面的代碼，記得引用1.10以上的jQuery和bootstrap.min.css，bootstrap.min.js。
這裡是將上面的JS代碼單獨放在一個js文件中，然後引用，加了那麼多<br/>是為了觀看滾動的效果——提示框是否會跟著移動。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="NewFolder1/bootstrap.min.css" rel="stylesheet" />
<script src="NewFolder1/jquery-1.11.1.min.js"></script>
<script src="NewFolder1/bootstrap.min.js"></script>
<script src="JavaScript1.js"></script>
</head>
<body>
<input type="button" name="name" value="alertSuccess" onclick="alertSuccess('提示信息：成功！')" />
<input type="button" name="name" value="alertInfo" onclick="alertInfo('提示信息：成功！')" />
<input type="button" name="name" value="alertWarning" onclick="alertWarning('提示信息：警告！')" />
<input type="button" name="name" value="alertDanger" onclick="alertDanger('提示信息：危險！')" />
<br />
<input type="button" name="name" value="confirmSuccess" onclick="confirmSuccess('提示信息：成功！', function () { window.location = 'http://www.cnblogs.com/xueyeduling/p/6833034.html'; })" />
<input type="button" name="name" value="confirmInfo" onclick="confirmInfo('提示信息：成功！' ,function () { window.location='http://www.cnblogs.com/xueyeduling/p/6833034.html' ; })" />
<input type="button" name="name" value="confirmWarning" onclick="confirmWarning('提示信息：警告！' ,function () { window.location='http://www.cnblogs.com/xueyeduling/p/6833034.html' ; })" />
<input type="button" name="name" value="confirmDanger" onclick="confirmDanger('提示信息：危險！' ,function () { window.location='http://www.cnblogs.com/xueyeduling/p/6833034.html' ; })" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
