CODEWITHSUNDEEP
jqueryhtmltwitter-bootstraptwitter-bootstrap-3
CodeTrooper
CodeTrooper

Reputation: 1888

Bootstrap 3 alerts dismissed with animation

Is there a way to make dismissed alert in bootstrap have an animation like fade out?

I added the class .fade to the code:

 <div class="alert alert-info fade alert-dismissable">
      <p><b>Gracias</b> por ponerte en contacto! Responderé a tu correo lo más pronto posible.</p>
 </div>

But it doesn't work. Any help will be appreciated!

Upvotes: 14

Views: 26755

Answers (5)

SRT
SRT

Reputation: 13

you have to use class "fade show" it will work !

Upvotes: 0

Pavel Dubinin
Pavel Dubinin

Reputation: 2430

You can listen to close.bs.alert event to use custom effects:

$(function(){
    $('body').on('close.bs.alert', function(e){
        e.preventDefault();
        e.stopPropagation();
        $(e.target).slideUp();
    });
});

See in action at https://jsfiddle.net/6s8dgh72/8/

Upvotes: 2

guest
guest

Reputation: 421

you can add '.in' class, alert fade out.

<div class="alert alert-info fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<p>message</p>
</div>

Upvotes: 42

Ahm3d Said
Ahm3d Said

Reputation: 812

you can omit the data-dismiss attribute 

<div class="alert alert-warning alert-dismissable">
      <button type="button" class="close" aria-hidden="true">&times;</button>
      <p>animated dismissable</p>
</div>

and use the following jQuery

$(".alert button.close").click(function (e) {
    $(this).parent().fadeOut('slow');
});

or if you want clicking anywhere to close the alert use

$(".alert-dismissable").click(function (e) {
    $(this).fadeOut('slow');
});

Upvotes: 9

zgood
zgood

Reputation: 12571

$('.alert-dismissable').fadeOut(); or assign a css3 fade out animation to your fade class and apply it to the <div> when you want it to fade out.

Upvotes: 3

Related Questions