這是網絡上的原始樣式地址，感謝博主：https://www.cnblogs.com/zhijiangch/p/7270109.html
我結合自己項目做了些調整，算是備份吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="myButton.css">
<script src="../../jquery.min.js"></script>
<style>
.alert {
display: none;
position: fixed;
text-align: center;
top: 50%;
left: 50%;
min-width: 200px;
min-height: 20px;
margin-left: -100px;
z-index: 99999;
padding: 10px 20px 10px 20px;
border: 1px solid transparent;
border-radius: 4px;
}
/**信息提示**/
.alert-info {
color: #000000;
font-size:14px;
background-color: #E6F1FF;
border-color: #2089FF;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
</style>
</head>
<body >
<button onclick="info_prompt('你是普通的！出現吧，Linda');">出現吧，提示框【信息提示】</button>
<button onclick="success_prompt('你是最棒的！')">出現吧，提示框【成功提示】</button>
<button onclick="fail_prompt('你是失敗的！');">出現吧，提示框【失敗提示】</button>
<button onclick="warning_prompt('你是危險的！');">出現吧，提示框【提醒】</button>
</body>
<script>
/**
* 彈出式提示框，默認1.2秒自動消失
* @param message 提示信息
* @param style 提示樣式，有alert-success、alert-danger、alert-warning、alert-info
* @param time 消失時間
*/
var prompt = function (message, style, time)
{
style = (style === undefined) ? 'alert-success' : style;
time = (time === undefined) ? 120000 : time;
$('<div>')
.appendTo('body')
.addClass('alert ' + style)
.html(message)
.show()
.delay(time)
.fadeOut();
};
// 成功提示
var success_prompt = function(message, time)
{
prompt(message, 'alert-success', time);
};
// 失敗提示
var fail_prompt = function(message, time)
{
prompt(message, 'alert-danger', time);
};
// 提醒
var warning_prompt = function(message, time)
{
prompt(message, 'alert-warning', time);
};
// 信息提示
var info_prompt = function(message, time)
{
prompt(message, 'alert-info', time);
};
</script>
</html>
貼上效果圖：
