引导警报数据关闭不起作用答案

【问题标题】：Bootstrap Alerts Data-Dismiss not working引导警报数据关闭不起作用
【发布时间】：2017-01-28 21:11:27
【问题描述】：

<div class="alert alert-info alert-dismissible fade show">
  <button class="close" data-dismiss="alert" aria-label="Close">x</button>
  Signed out successfully.
</div>

我无法使用上面的 html 关闭 Bootstrap 警报。根据引导文档，一切看起来都正确。我将它与 Rails 应用程序一起使用。

你能看出我做错了吗？如果 HTML 没有任何问题，您能否提供任何想法。我正在使用 Rails 5 和 Turbolinks 4。我可以告诉你，引导 JS 和 CSS 都已正确加载。

【问题讨论】：

你有错误吗？
我没有错误
我让它与一些 jquery 一起工作，但想知道我是否做错了什么，或者是否有一些我应该知道的不兼容

标签： javascript css ruby-on-rails twitter-bootstrap

【解决方案1】：

如果在上述解决方案之后它确实不起作用，请检查您是否在 HTML 端正确链接了引导 javascript 功能链接。您可以签入Bootstrap official docs，但截至 2022 年 2 月 23 日，我导入了正确的标签，如下所示；

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

如果您在 HTML 文件中导入这些标签，并且在标签中添加了适当的类，它应该可以工作。

P.S.：如果我在回答方面有任何错误，对不起，这是我第一次尝试回答问题。我只是 JavaScript 的初学者，我真的很想帮助像我这样的初学者:)

【讨论】：

【解决方案2】：

我看不出你的HTML mark-up有什么问题。

所以，这让我想到了一个想法，我认为你在 fade show 事件中做错了什么。看看你是否正在处理那些进入警报关闭事件路径的事件。

发布你的javascript，那么这个唯一的答案就可以完成了。

【讨论】：

【解决方案3】：

您必须将fade 和in 类都添加到警报中。

要让您的警报在关闭时使用动画，请确保它们具有 .fade 和 .in 类已应用于它们。

请参阅文档中的 Alert.js Usage。

这是正在应用的 CSS：

.fade.in {
  opacity: 1
}

.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear
}

工作示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="alert alert-info alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
  </button>
  Signed out successfully
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：