替代alert的消息框和提示框
Posted xueyeduling
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了替代alert的消息框和提示框相关的知识，希望对你有一定的参考价值。
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>
以上是关于替代alert的消息框和提示框的主要内容，如果未能解决你的问题，请参考以下文章