¿Pueden aparecer y desaparecer las alertas de Twitter Bootstrap?

78

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

Respuestas:

141

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/

DivZero
fuente
Internet Explorer no es compatible con la propiedad de transición y IE8 y los siguientes no son compatibles con la opacidad, debe usar la propiedad del filtro.
Caro
17
Bueno, se degrada con gratitud. Es decir, sin desvanecerse o desaparecer. Si realmente NECESITA el desvanecimiento, entonces el enfoque de bootstrap no es para usted. Si solo agrega un toque extra de brillo a su diseño y desea un sitio web a prueba de futuro / móvil, haga lo que hice: recompense a los usuarios con navegadores modernos con bonitas animaciones y omítelos para aquellos que no lo hacen. En lugar de darles animaciones potencialmente entrecortadas / lentas porque utilizan hardware / software obsoleto.
DivZero
1
He publicado una respuesta alternativa a continuación. Si bien estoy de acuerdo en que esta respuesta es la mejor para el rendimiento, creo que contamina el marcado. No está claro que las clases fadey inestén asociadas. Como se ve en el marcado class="alert alert-success fade in". La inclase parece una clase completamente independiente, como alerto alert-success. Sería mejor usar el nombre de clase faded-in(y fadedebería serlo faded), la transición es temporal, pero el nombre de clase sigue vivo.
tfmontague
Para que esto funcione en Bootstrap 4, use la "show"clase en lugar de"in"
DigitalDan
28

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!');
Rob Vermeer
fuente
18

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.

kreek
fuente
8
Esto no desvanece el mensaje de alerta para mí, solo lo muestra.
dmackerman
2
Esto ya no funcionará a partir de Bootstrap 3; consulte github.com/twbs/bootstrap/pull/6342 en Varios
Carl
9

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.

pri
fuente
Elegante y sencillo, gracias. Me gusta el hecho de que no es necesario escribir js. Hay una forma de cambiar el comportamiento de desvanecimiento, como hacer que el desvanecimiento sea más largo.
Carlos Mora
6

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);
   });
});
cmcginty
fuente
4

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>
Chris
fuente
2

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');

});
tfmontague
fuente
1

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.

Afshin Mehrabani
fuente
1

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)
wicardoso
fuente
0

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!

Vikasdeep Singh
fuente