求助：Bootstrap 4下通过JS/jQuery实现按钮点击显示Alert

我之前也踩过这个Bootstrap Alert的坑，结合你的描述，大概率是初始隐藏的方式不对，或者一些细节没注意到，下面给你一步步梳理解决方案：

1. 先修正HTML结构（核心坑点） #

Bootstrap 4的Alert默认是显示状态（alert类本身是display: block），单纯去掉show类根本没法隐藏它，必须用Bootstrap的**d-none实用类**来初始隐藏。同时要确保关闭按钮的data-dismiss="alert"属性正确：

<!-- 初始隐藏的Alert：用d-none，保留alert样式类 -->
<div class="alert alert-success d-none" role="alert" id="customAlert">
  这是你要显示的提示内容！
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- 触发显示的按钮 -->
<button type="button" class="btn btn-primary" id="showAlertBtn">点击显示提示框</button>

2. 编写正确的JS逻辑 #

Bootstrap 4依赖jQuery，所以要确保引入顺序是：先jQuery，再Bootstrap JS。然后给按钮绑定点击事件，移除d-none类来显示Alert；同时监听Alert关闭事件，让它关闭后回到隐藏状态，方便再次点击显示：

// 等待DOM加载完成再执行代码
$(document).ready(function() {
  // 点击按钮显示Alert
  $('#showAlertBtn').click(function() {
    // 移除d-none显示，可选添加fade和show实现淡入动画
    $('#customAlert').removeClass('d-none').addClass('fade show');
  });

  // Alert关闭后，重新添加d-none，确保下次能再次显示
  $('#customAlert').on('closed.bs.alert', function() {
    $(this).addClass('d-none');
  });
});

3. 排查常见错误 #

• 依赖顺序错误：如果没先引jQuery，Bootstrap的JS组件会直接失效，检查你的引入代码：

  <!-- 正确顺序 -->
  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>
  

• JS代码位置不对：如果JS写在HTML前面，DOM还没渲染完成，会找不到#showAlertBtn或#customAlert元素，要么把JS放在</body>前，要么用$(document).ready()包裹。
• 动画类冲突：如果给Alert加了fade类但没处理动画逻辑，可能导致显示异常，不需要动画的话可以直接去掉fade类，只保留alert alert-success d-none。

这样调整后，点击按钮就能正常显示Alert，关闭按钮也能正常隐藏它，而且可以重复触发～

内容的提问来源于stack exchange，提问作者Matthew