introduction
- Recently, I was looking for a prompt box that can disappear automatically. I searched and found this: prompt box settings_html page prompt box waits for a certain period of time to disappear
- The blogger wrote very well, and I can directly copy and run it, and I can also benefit from it.
- This post makes some minor updates to the code from this blog:
- fix typo
- Remove extraneous style references (
bootstrap.min.jsandbootstrap.min.js)
Complete code (you can copy and run to view)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style>
.alert-prompt {
background: rgba(0, 0, 0, 0.8);
color: #fff;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1
}
</style>
</head>
<body>
<div class="container">
<h4>模拟数据查询，查询失败显示一个模态框，1.2秒后自动消失</h4>
<button type="button" class="btn" onclick="test('alert-danger')">查询失败</button>
<button type="button" class="btn" onclick="test('alert-success')">成功</button>
<button type="button" class="btn" onclick="test('alert_warning')">警告</button>
<button type="button" class="btn" onclick="test('alert_info')">信息提示</button>
<button type="button" class="btn" onclick="test('alert_info2')">信息提示2</button>
</div>
<script>
function test(str) {
switch (str) {
case "alert-success": success_prompt("提交成功"); break;
case "alert_warning": warning_prompt("错误警告"); break;
case "alert-danger": fail_prompt("提交失败"); break;
case "alert_info": info_prompt("未查询到数据"); break;
default: alert_prompt("未查询到数据");
}
}
/**
* 弹出式提示框，默认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) ? 1200 : time;
$('<div id="promptModal">')
.appendTo('body')
.addClass('alert ' + style)
.css({
"display": "block",
"z-index": 99999,
"left": ($(document.body).outerWidth(true) - 120) / 2,
"top": ($(window).height() - 45) / 2,
"position": "absolute",
"padding": "20px",
"border-radius": "5px"
})
.html(message)
.show()
.delay(time)
.fadeOut(10, function () {
$('#promptModal').remove();
});
};
// 成功提示
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);
};
// 信息提示
var alert_prompt = function (message, time) {
prompt(message, 'alert-prompt', time);
};
</script>
</body>
</html>
Note[1]
- When this method is used at the
window.location.reload()same time, the prompt box will be refreshed by the page after a short time. In this case, you can usesetTimeout()the method to set the page to refresh after a period of time. For example:success_prompt("提交成功"); setTimeout("window.location.reload()",1200);
References
[1] Prompt box setting _html page prompt box waits for a certain period of time to disappear