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‘>×</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 }
提示框的应该设置为模式对话框形式,目前还没有完善。
时间: 2024-10-27 12:40:15