Twitter-Bootstrap Closing Alert Does Not Work

twitter-bootstrap closing alert does not work

I've sorted it out.

Instead of using a button, I'm now using a span, so the form doesn't get submitted:

        <span class="close" data-dismiss="alert">×</span>

thanks for your help

twitter-bootstrap closing alert does not work

I've sorted it out.

Instead of using a button, I'm now using a span, so the form doesn't get submitted:

        <span class="close" data-dismiss="alert">×</span>

thanks for your help

Alert dismissing using Twitter Bootstrap is not working?

Thanks to davidkonrad's comment.

The solution is trivial, by adding:

    <script src="js/bootstrap.min.js"></script>

Twitter Bootstrap alert message close and open again

Data-dismiss completely removes the element. Use jQuery's .hide() method instead.

The fix-it-quick method:

Using inline javascript to hide the element onclick like this:

<div class="alert" style="display: none"> 
    <a class="close" onclick="$('.alert').hide()">×</a>  
    <strong>Warning!</strong> Best check yo self, you're not looking too good.  
</div>

<a href="#" onclick="$('alert').show()">show</a>

http://jsfiddle.net/cQNFL/

This should however only be used if you are lazy (which is no good thing if you want an maintainable app).

The do-it-right method:

Create a new data attribute for hiding an element.

Javascript:

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

and then change data-dismiss to data-hide in the markup. Example at jsfiddle.

$("." + $(this).attr("data-hide")).hide()

This will hide all elements with the class specified in data-hide, i.e: data-hide="alert" will hide all elements with the alert class.

Xeon06 provided an alternative solution:

$(this).closest("." + $(this).attr("data-hide")).hide()

This will only hide the closest parent element. This is very useful if you don't want to give each alert a unique class. Please note that, however, you need to place the close button within the alert.

Definition of .closest from jquery doc:

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Bootstrap dismissible alert not working

<div class="alert alert-warning alert-dismissible" role="alert">
  <span type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></span>
  <strong>Warning!</strong> Still on beta stage.
</div>

Twitter Bootstrap alerts does not gets close in the model

Please check the https://github.com/twitter/bootstrap/issues/838
or http://jsfiddle.net/thegreyjoy/yXswA/7/

We just need to change the class of the alert box when it is used in the model.

:)

Bootstrap alerts not closing

You still need to add Twitter Bootstrap core JS.

<!-- jquery -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

<div class="alert alert-success alert-dismissible" role="alert">

  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>

  </button>

  <strong>Yay</strong> Your email has been added!

</div>

Bootstrap alert auto closing not working

$(this) was changed inside the setTimeout scope. Cache it in a variable. that in my example.

$(function() {
  var alert = $('div.alert[auto-close]');
  alert.each(function() {
    var that = $(this);
    var time_period = that.attr('auto-close');
    setTimeout(function() {
      that.alert('close');
    }, time_period);
  });
});

WORKING SNIPPET:

$(function() {

  var alert = $('div.alert[auto-close]');

  alert.each(function() {

    var that = $(this);

    var time_period = that.attr('auto-close');

    setTimeout(function() {

      that.alert('close');

    }, time_period);

  });

});

<script src="https://code.jquery.com/jquery.min.js"></script>

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="moo" class="alert alert-danger alert-dismissible" role="alert" auto-close="3000">

  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>

  </button>

  alert one

</div>

<div class="alert alert-success alert-dismissible" role="alert" auto-close="5000">

  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>

  </button>

  alert two

</div>

---

Related Topics