¿Pueden aparecer y desaparecer las alertas de Twitter Bootstrap?

Cuando vi por primera vez las alertas en Bootstrap, pensé que se comportarían como lo hace la ventana modal, cayendo o desapareciendo, y luego desapareciendo cuando se cerraran. Pero parece que siempre están visibles. Supongo que podría hacer que se sentaran en una capa sobre mi aplicación y administrar mostrándolos, pero me preguntaba si la funcionalidad estaba incorporada.

¡Gracias!

Editar, lo que tengo hasta ahora:

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

Estoy totalmente en desacuerdo con la mayoría de las respuestas mencionadas anteriormente.

Respuesta corta:

Omita la clase "in" y agréguela usando jQuery para fundirla.

Vea este jsfiddle para ver un ejemplo que se desvanece en alerta después de 3 segundos http://jsfiddle.net/QAz2U/3/

Respuesta larga:

Aunque es cierto que bootstrap no admite de forma nativa el desvanecimiento de las alertas, la mayoría de las respuestas aquí usan la función jQuery fade, que usa JavaScript para animar (desvanecer) el elemento. La gran ventaja de esto es la compatibilidad entre navegadores. La desventaja es el rendimiento (ver también: jQuery para llamar a CSS3 fade animation? ).

Bootstrap usa transiciones CSS3, que tienen un rendimiento mucho mejor. Lo que es importante para los dispositivos móviles:

Bootstraps CSS para atenuar la alerta:

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

¿Por qué creo que esta actuación es tan importante? Las personas que usan navegadores y hardware antiguos potencialmente tendrán transiciones entrecortadas con jQuery.fade (). Lo mismo ocurre con el hardware antiguo con los navegadores modernos. Al usar transiciones CSS3, las personas que usan navegadores modernos obtendrán una animación suave incluso con hardware más antiguo, y las personas que usan navegadores antiguos que no admiten transiciones CSS verán instantáneamente el elemento emergente, lo que creo que es una mejor experiencia de usuario que las animaciones entrecortadas.

Vine aquí buscando la misma respuesta que la anterior: desvanecerse en una alerta de arranque. Después de investigar un poco el código y CSS de Bootstrap, la respuesta es bastante sencilla. No agregue la clase "in" a su alerta. Y agregue esto usando jQuery cuando desee desvanecer su alerta.

HTML (¡observe que NO hay en clase!)

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

Javascript:

function showAlert(){
  $("#myAlert").addClass("in")
}

Llamar a la función anterior agrega la clase "in" y se desvanece en la alerta usando transiciones CSS3 :-)

También vea este jsfiddle para ver un ejemplo usando un tiempo de espera (¡gracias John Lehmann!): Http://jsfiddle.net/QAz2U/3/

Lo que uso es esto:

En su plantilla un área de alerta

<div id="alert-area"></div>

Luego, una función jQuery para mostrar una alerta.

function newAlert (type, message) {
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert('success', 'Oh yeah!');

Puede fundir un cuadro con jquery. Use bootstraps integrados en la clase 'hide' para configurar efectivamente display: none en el elemento div:

<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0">
            <a class="close" href="#">×</a>
            <p><strong>Well done!</strong> You successfully read this alert message.</p>
        </div>

y luego use la función fadeIn en jquery, así:

$("#saveAlert").fadeIn();

También se especifica una duración para la función fadeIn, por ejemplo: $ ("# saveAlert"). FadeIn (400);

Los detalles completos sobre el uso de la función fadeIn se pueden encontrar en el sitio de documentación oficial de jQuery: http://api.jquery.com/fadeIn/

Solo una nota al margen también, si no está usando jquery, puede agregar la clase 'ocultar' a su propio archivo CSS, o simplemente agregar esto a su div:

 <div style="display:none;" id="saveAlert">

Su div se configurará básicamente como oculto de forma predeterminada, y luego jQuery realizará la acción fadeIn, lo que obligará a que se muestre el div.

Para 2.3 y superior, simplemente agregue:

$(".alert").fadeOut(3000 );

oreja:

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

Funciona en todos los navegadores.

Agregar hideclase a alert-message. Luego, coloque el siguiente código después de la importación de su script jQuery:

$(document).ready( function(){
    $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
    window.setTimeout( function(){
        $(".alert-message").slideUp();
    }, 2500);
});

Si desea manejar varios mensajes, este código los ocultará en orden ascendente:

$(document).ready( function(){
   var hide_delay = 2500;  // starting timeout before first message is hidden
   var hide_next = 800;   // time in mS to wait before hiding next message
   $(".alert-message").slideDown().each( function(index,el) {
      window.setTimeout( function(){
         $(el).slideUp();  // hide the message
      }, hide_delay + hide_next*index);
   });
});

Ninguna de las respuestas actuales funcionó para mí. Estoy usando Bootstrap 3.

Me gustó lo que estaba haciendo Rob Vermeer y comencé por su respuesta.

Para un efecto de desvanecimiento y luego desvanecimiento, solo usé escribí la siguiente función y usé jQuery:

Html en mi página para agregar la (s) alerta (s) a:

        <div class="alert-messages text-center">
        </div>

Función Javascript para mostrar y descartar la alerta.

function showAndDismissAlert(type, message) {
    var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';

    // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
    $(".alert-messages").prepend(htmlAlert);

    // Since we are prepending, take the first alert and tell it to fade in and then fade out.
    // Note: if we were appending, then should use last() instead of first()
    $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); });
}

Luego, para mostrar y descartar la alerta, simplemente llame a la función de esta manera:

    showAndDismissAlert('success', 'Saved Successfully!');
    showAndDismissAlert('danger', 'Error Encountered');
    showAndDismissAlert('info', 'Message Received');

Como nota al margen, diseñé los mensajes div.alert corregidos en la parte superior:

    <style>
    div.alert-messages {
        position: fixed;
        top: 50px;
        left: 25%;
        right: 25%;
        z-index: 7000;
    }
    </style>

No estoy de acuerdo con la forma en que Bootstrap usa fade in(como se ve en su documentación - http://v4-alpha.getbootstrap.com/components/alerts/ ), y mi sugerencia es evitar los nombres de clase fadey in, y evitar ese patrón en general (que se ve actualmente en la respuesta mejor calificada a esta pregunta).

(1) La semántica es incorrecta: las transiciones son temporales, pero los nombres de las clases perduran. Entonces, ¿por qué deberíamos nombrar nuestras clases fadey fade in? Debería serlo fadedy faded-in, para que cuando los desarrolladores lean el marcado, quede claro que esos elementos eran fadedo faded-in. El equipo de Bootstrap ya ha eliminado , ¿ hidepor hiddenqué es fadediferente?

(2) El uso de 2 clases fadey inpara una sola transición contamina el espacio de clases. Y no está claro eso fadey inestán asociados entre sí. La inclase parece una clase completamente independiente, como alerty alert-success.

La mejor solución es usar fadedcuando el elemento se ha desvanecido y reemplazar esa clase con faded-incuando el elemento se ha desvanecido.

Alerta desvanecida

Entonces, para responder a la pregunta. Creo que el marcado, el estilo y la lógica de alerta deben escribirse de la siguiente manera. Nota: Siéntase libre de reemplazar la lógica jQuery, si está usando javascript vanilla .

HTML

<div id="saveAlert" class="alert alert-success">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

CSS

.faded {
  opacity: 0;
  transition: opacity 1s;
}

JQuery

$('#saveAlert .close').on('click', function () {

  $("#saveAlert")
    .addClass('faded');

});

Por supuesto que sí. Utilice este simple archivo en su proyecto: https://gist.github.com/3851727

Primero agregue su HTML como este:

<div id="messagebox" class="alert hide"></div>

y luego usa:

$("#messagebox").message({text: "Hello world!", type: "error"});

Puede pasar todos los tipos de alerta de arranque como error, successy warninga la typepropiedad como opciones.

Conseguí de esta manera cerrar desvaneciendo mi alerta después de 3 segundos. Espero que te sea de utilidad.

    setTimeout(function(){
    $('.alert').fadeTo("slow", 0.1, function(){
        $('.alert').alert('close')
    });     
    }, 3000)

Esta es una pregunta muy importante y estaba luchando por hacerlo (mostrar / ocultar) el mensaje reemplazando el mensaje actual y agregando un nuevo mensaje.

A continuación se muestra un ejemplo de trabajo:

function showAndDismissAlert(type, message) {

  var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';
  $(".alert-messages").prepend(htmlAlert);
  $(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() {
    $(this).remove();
  });

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert-messages"></div>

<div class="buttons">
  <button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>
  <button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>
  <button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>
</div>

¡Espero que ayude a otros!