替代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刪除。

猜您在找 js提示框替代系統alert，自動關閉alert對話框 Alert提示框的vue組件編寫 Selenium處理alert等提示框 alert提示框去掉域名 PyQt 消息提示框 easyui 消息提示框 uniapp 消息提示框前端開發之彈出框系列教程一：Alert提示框 Android第三方開源對話消息提示框：SweetAlertDialog（sweet-alert-dialog） web自動化 -- 消息提示框處理（alert、confirm、prompt）