当前位置：首页 > news >正文

html下自动消失的提示框jQuery实现

news 2025/8/25 3:19:02

引言

最近在找一个可以自动消失的提示框，找来找去，找到了这个：提示框设置_html页面提示框等待一定时间消失
博主写得很好，可以直接复制运行出来，我也从中得以受益。
本篇文章对这篇博客的代码做了一些小的更新：
- 修复拼写错误
- 去掉无关的样式引用（bootstrap.min.js和bootstrap.min.js）

完整代码

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

注意[1]

这种方式在与window.location.reload() 同时使用时，会造成提示框提示短暂时间就会被页面刷新，这种情况可以使用setTimeout（）方法，设置页面在一段时间后进行刷新。例如：
```
success_prompt("提交成功");
setTimeout("window.location.reload()",1200);
```