Предупреждения Bootstrap 3 с анимацией

Можно ли отключить оповещение в бутстрапе, если анимация похожа на выгорание?

Я добавил класс .fade в код:

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

Но это не сработает. Любая помощь будет оценена!

Ответы

Ответ 1

вы можете опустить атрибут data-reject

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

и используйте следующий jQuery

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

или если вы хотите щелкнуть в любом месте, чтобы закрыть оповещение,

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

Ответ 2

вы можете добавить класс ".in", оповещение будет исчезать.

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

Ответ 3

$('.alert-dismissable').fadeOut(); или назначьте анимацию css3 fade out вашему классу fade и примените его к <div>, когда вы хотите, чтобы он исчез.

Ответ 4

Вы можете прослушивать событие close.bs.alert для использования пользовательских эффектов:

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

Смотрите в действии https://jsfiddle.net/6s8dgh72/8/