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>

I can't get my Bootstrap alert to close with the html above. Everything looks right according to the bootstrap docs. I'm using this with a rails app.

Can you see what I'm doing wrong? If nothing is wrong with the HTML, can you offer any ideas. I'm using Rails 5 and Turbolinks 4. I can tell you that bootstrap JS and CSS are both loaded correctly.

Answer 1

If it does not really work after the solution above, please check if you linked bootstrap javascript functionality links properly at HTML side. You can check inBootstrap official docs but as of the date of 23 Feb, 2022, I imported proper tags like below;

<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>

If you import those tags in your HTML file and if you added proper classes to your tags, it should have work.

PS: If I have any mistakes about answering, sorry that's my first attempt to answer a question. I'm just a beginner in JavaScript and I really wanted to help beginner folks like me:)

Answer 2

I can't see anything wrong with your HTML mark-up .

So, it leaves me with one thought, I think you are doing something wrong with the fade show events. See if you are doing something with those events which is coming into the path of alert close event.

Post your javascript, then this only answer can be completed.

Answer 3

You have to add both the fade and in classes to the alert.

To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them.

See Alert.js Usage from the Docs.

This the CSS that's being applied:

.fade.in {
  opacity: 1
}

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

Working Example:

 <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>