Bootstrap Alerts Data-Dismiss 不起作用

Question

<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。我可以告訴你，bootstrap JS 和 CSS 都已正確加載。

Answer 1

如果在上述解決方案后它確實不起作用，請檢查您是否在 HTML 端正確鏈接了 bootstrap javascript 功能鏈接。 您可以查看Bootstrap 官方文檔，但截至 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 文件中導入這些標簽，並且向標簽添加了適當的類，它應該可以工作。

PS：如果我回答有任何錯誤，抱歉，這是我第一次嘗試回答問題。 我只是 JavaScript 的初學者，我真的很想幫助像我這樣的初學者:)

Answer 2

我看不到您的HTML mark-up任何問題。

所以，這讓我有一個想法，我認為您在fade show事件中做錯了什么。 查看您是否正在處理即將進入警報關閉事件路徑的那些事件。

發布您的JavaScript，然后可以完成此唯一答案。

Answer 3

你必須同時添加fade ，並in類的警報。

要使警報在關閉時使用動畫，請確保它們已經應用了.fade和.in類。

請參閱文檔中的Alert.js 使用情況 。

這是正在應用的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>