1. 引言
Bootstrap是一款流行的前端框架，提供了大量的组件和工具，可帮助我们快速构建美观、响应式的网站。其中之一是alert组件，它为我们提供了一种在页面上显示消息、警告或错误的方式。然而，有时我们需要关闭这个提示窗口，以便用户可以继续访问网站。在本文中，我们将探讨关闭Bootstrap alert组件的几种方法。
2. 使用JavaScript方法关闭
2.1. 关闭按钮
Bootstrap alert组件提供了一个关闭按钮，可在警报框的右上角找到。单击该按钮将关闭消息框。关闭按钮的HTML代码如下：
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
要使用JavaScript方法关闭警报框，只需使用jQuery选择器选择关闭按钮，然后调用它的click()方法即可。例如，以下代码将点击警报框的关闭按钮来关闭它：
<!DOCTYPE html>
<html>
<head>
<title>关闭 Bootstrap Alert 组件</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>警告！</strong>这是一条警告消息。
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<script>
$(document).ready(function(){
$(".close").click(function(){
$(".alert").alert("close");
});
});
</script>
</body>
</html>
在上面的代码中，我们选择关闭按钮，并使用click()方法将其点击。然后，我们选择警报框，并调用alert("close")方法来关闭它。注意，我们使用的是alert() 方法，而不是alert() 函数。
2.2. 超时自动关闭
Bootstrap提供了一种方法，可以设置警报框在一定时间后自动关闭。要使用此功能，请使用 jQuery 插件“bootstrap.js”。首先，我们需要在警报框上添加一个 “data-auto-dismiss” 属性，它指定了警报框应在何时自动关闭：
<div class="alert alert-info alert-dismissible fade show" role="alert" data-auto-dismiss="5000">
This alert will autosdismiss after 5 seconds.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
上面的代码将告警框的data-auto-dismiss 设置为 "5000"，表示在 5 秒后自动关闭。然后我们可以使用以下代码来自动关闭警报框：
<!DOCTYPE html>
<html>
<head>
<title>使用 JavaScript 方法关闭 Bootstrap Alert 组件</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-info alert-dismissible fade show" role="alert" data-auto-dismiss="5000">
This alert will auto-dismiss after 5 seconds.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<script>
$(document).ready(function() {
$('[data-auto-dismiss]').each(function() {
var $this = $(this);
var delay = $this.data('auto-dismiss');
setTimeout(function() {
$this.alert('close');
}, delay);
});
});
</script>
</body>
</html>
以上代码将自动关闭具有“数据自动解雇”属性的所有警报框。在此代码中，我们选择了具有该属性的所有元素，使用 data() 方法获取自动解雇时间，然后使用 setTimeout() 方法在规定的时间之后关闭警报框。
3. 使用CSS方法关闭
我们可以使用CSS来关闭Bootstrap警报框。下面是一些CSS代码，可使警报框消失：
.alert.fade.show {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.alert.fade.show:not(.d-flex) {
display: none;
}
我们可以通过在警报框的上面添加自己的CSS类，然后在需要关闭警报框时将其添加到警报框，并使用JavaScript代码来删除该类，以便将其从屏幕上删除。以下是代码示例：
<!DOCTYPE html>
<html>
<head>
<title>使用 CSS 方法关闭 Bootstrap Alert 组件</title>
<style>
.alert.alert-dismissible.fade.show:not(.custom) {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>警告！</strong>这是一条警告消息。
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<button type="button" id="delete" class="btn btn-danger">删除警报框</button>
<script>
$(document).ready(function() {
$("#delete").click(function() {
$(".alert").addClass("custom");
});
});
</script>
</body>
</html>
在本例中，我们在JavaScript中选择了按钮元素，当单击时，我们向警报框添加了自定义类。该类添加到警报框后，使用CSS使其消失。
4. 结论
在本文中，我们讨论了一些关闭Bootstrap警报框的方法。我们可以使用JavaScript的click()方法关闭警报框的关闭按钮，或者使用自己的JavaScript代码自动关闭警报框。我们还可以使用CSS方法关闭警报框。这些都是非常简单，易于实现的方法，它们可以帮助您提高网站的用户体验。