替代alert的消息框和提示框

本文转载自查看原文 2017-05-09 22:20 2523 JavaScript

　　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'>&times;</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>

</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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Alert提示框的vue组件编写 easyui 消息提示框利用selenium webdriver点击alert提示框基于JQuery 的消息提示框效果代码 Flutter Toast消息提示框插件 UWP中的消息提示框(二) Vue Element UI 消息提示框 js消息提示框插件-----toastr用法 Vue ElementUI 如何修改消息提示框样式使用vue自定义简单的消息提示框