javascript - 如何使用 Bootstrap 在几秒钟后自动关闭警报?
问题描述
我开发了一个 Python/Flask 应用程序并遇到了实现 Bootstrap 警报的问题,其想法是:
- 可通过关闭按钮关闭。
- 如果不采取任何措施,则在 2 秒后淡出并关闭。
代码
<div class="container">
{% for message in get_flashed_messages() %}
<script>
function close_alert()
{
document.getElementById("my_alert").close()
}
setTimeout("close_alert()", 2000)
</script>
<div id="my_alert" class="alert alert-primary alert-dismissible fade show" role="alert">
<strong>{{message}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
我是 Bootstrap 的新手,我将不胜感激!
谢谢!
解决方案
您可以使用 Bootstrap 方法来实现这一点。查看页面底部的此处了解更多信息。
逻辑
当单击按钮时,jQuery 删除d-none
了警报元素的类,使其可见。然后使用setTimeout()
JS 将等待 2000 毫秒,然后使用alert()
引导程序 4 方法关闭警报。
它只需单击一下即可。
注意:使用Bootstrap 4 方法需要使用 jQuery。
$('#btn').click(function(){
$('#alert').removeClass('d-none');
setTimeout(() => {
$('.alert').alert('close');
}, 2000);
})
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<div id="alert" class="alert alert-primary m-3 d-none" role="alert">
This is a primary alert—check it out!
</div>
<button class="btn btn-primary m-3" id="btn">
show alert and close it in 2 seconds
</button>
使用纯 JavaScript
每次用户单击按钮时,此代码都会显示警报。如果您不希望这样,您可以使用布尔值或会话存储变量与条件语句相结合,使其仅工作一次。
const btn = document.getElementById('btn'),
alert = document.getElementById('alert');
btn.addEventListener('click', () => {
alert.classList.remove('d-none');
setTimeout(() => {
alert.classList.add('d-none');
}, 2000)
})
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<div id="alert" class="alert alert-primary m-3 d-none" role="alert">
This is a primary alert—check it out!
</div>
<button id="btn" class="btn btn-primary m-3">
show alert and close it in 2 seconds
</button>
推荐阅读
- java - 将 Java EE Web 应用程序导出为 JAR
- android - 为什么我的改造实例无法解析特定字段?
- java - 如何使用 eclipselink jpa 在 POST Rest API 上使用原始类型
- flutter - Flutter如何以编程方式关闭设备灯
- python - 有时忽略 pylint(import-error) 是最好的解决方案?
- mongodb - 使用 Jinja 的一个 HTML 页面中的两个 For 循环(不工作)
- javascript - 如何删除对象的第一个属性?
- vb.net - 选中另一个复选框时取消选中先前选择的复选框
- r - 创建函数后应用问题
- python - 如何注释包含类对象的变量的类型