bootstrap_ref_js_alert

Bootstrap JS 警告框

JS 警告框 (alert.js)

Bootstrap 的 alert 插件允许你创建可关闭的警告消息。用户可以手动关闭它们。

要了解更多关于警告框的教程，请阅读我们的 Bootstrap 警告框教程。

警告框插件类

类名 描述 示例 (概念性 - 具体代码请参考完整的警告框教程)

.alert 创建警告消息框的基础类。 试一试

.alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light, .alert-dark 用于为警告框设置颜色的上下文类。例如：.alert-success 表示一个成功的操作。 试一试

.alert-dismissible 在警告框 <div> 上用于启用可关闭功能所需的类。必须与关闭按钮一起使用。 试一试

.btn-close 用于 <button> 元素，为警告消息设置关闭按钮样式。通常放置在 .alert-dismissible 内部。 试一试

通过 data-bs-dismiss 属性关闭警告框

在 <button> 元素（通常带有 .btn-close 类）上添加 data-bs-dismiss="alert" 属性，以启用警告消息的关闭功能。确保警告框本身带有 .alert-dismissible 类。

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  **Holy guacamole!** You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

fade 和 show 类在警告框关闭时提供渐隐动画效果。

通过 JavaScript 关闭警告框

你也可以使用 JavaScript 以编程方式关闭警告框：

// 获取警告框元素
var alertElement = document.getElementById('myAlert');

// 创建一个 Bootstrap Alert 实例
var bsAlert = new bootstrap.Alert(alertElement);

// 关闭警告框
bsAlert.close();

// 警告框的 HTML 示例：
// <div class="alert alert-warning alert-dismissible fade show" id="myAlert" role="alert">
//   Your alert message.
//   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
// </div>

确保你的警告框元素有一个 id (例如，myAlert)，以便使用 JavaScript 轻松定位它。

警告框选项

Bootstrap 5 的警告框主要依靠类和数据属性进行配置。基本功能在实例化时没有特定的 JavaScript 选项传递。

警告框方法

下表列出了可用的警告框方法。

方法 描述 示例

close() 关闭警告消息。 var bsAlert = new bootstrap.Alert(myAlertEl); bsAlert.close();

dispose() 销毁一个 alert 实例，移除事件监听器和数据。 var bsAlert = new bootstrap.Alert(myAlertEl); bsAlert.dispose();

getInstance(element) 静态方法，获取与 DOM 元素关联的 alert 实例。 var instance = bootstrap.Alert.getInstance(myAlertEl);

getOrCreateInstance(element, [config]) 静态方法，获取一个 alert 实例，如果不存在则创建一个新的。 var instance = bootstrap.Alert.getOrCreateInstance(myAlertEl);

警告框事件

下表列出了所有可用的警告框事件。这些事件在警告框元素本身上触发。

事件 描述 如何监听

close.bs.alert 当调用 close 实例方法时，此事件会立即触发。 myAlertEl.addEventListener('close.bs.alert', function () { /* 你的代码 */ });

closed.bs.alert 当警告框关闭后（会等待 CSS 过渡完成）触发此事件。 myAlertEl.addEventListener('closed.bs.alert', function () { /* 你的代码 */ });