Bootstrap 警告框

警告框插件为 Bootstrap 的 .alert 提示条提供"关闭"能力：点击右上角的 ×，整条警告以淡出动画消失，无需刷新页面。它是发布消息、操作反馈等场景里最轻量的交互组件。

最小可关闭警告框

在 .alert 元素里放一个带 data-dismiss="alert" 的关闭按钮即可：

<div class="alert alert-warning fade in">
  <a href="#" class="close" data-dismiss="alert"
     aria-label="关闭">&times;</a>
  <strong>注意：</strong>这是一条可以关闭的警告。
</div>

说明：浏览器中会显示一条浅黄色警告条，左侧有加粗的"注意："，右上角有个 ×；单击 × 后警告条淡出并从页面移除。

四种样式均可关闭

插件与样式相互独立，alert-success、alert-info、alert-danger 等同样支持关闭：

<div class="alert alert-danger fade in">
  <a href="#" class="close" data-dismiss="alert"
     aria-label="关闭">&times;</a>
  删除操作不可恢复，请谨慎！
</div>

效果：红色警示条，点击 × 即关闭，关闭逻辑与黄色警告完全一致。

用方法关闭并监听事件

不点 × 也能用 JavaScript 触发关闭，并监听两个事件：close.bs.alert（关闭前）与 closed.bs.alert（关闭完成后）：

<script>
  $('#tips').alert('close');   // 代码方式关闭 #tips
  $('#tips').on('closed.bs.alert', function () {
    console.log('警告框已被关闭');
  });
</script>

说明：close.bs.alert 在收起动画开始前触发，此时阻止默认行为可取消关闭；closed.bs.alert 在动画结束后触发，常用于清理或统计。

定时自动消失

结合 setTimeout 让提示 3 秒后自己消失，适合"保存成功"这类短暂反馈：

<script>
  $('#successMsg').alert('close');   // 立即执行一次关闭
  // 常用写法：延迟 3 秒再关闭
  // setTimeout(function () {
  //   $('#successMsg').alert('close');
  // }, 3000);
</script>

说明：保存成功后页面先显示绿色成功条，3 秒后自动淡出，不打扰用户后续操作。

小结：警告框插件只负责让 .alert 优雅地关闭；加一个 data-dismiss 按钮即可使用，需要联动逻辑时用 alert('close') 方法与 close、closed 事件即可。