Pregunta ¿Pueden las alertas de Twitter Bootstrap desvanecerse tanto como desaparecer?


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 cierra. Pero parece que siempre son visibles. Supongo que puedo hacer que se sienten en una capa encima de mi aplicación y administrarlas, pero me pregunto si la funcionalidad está integrada.

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

73
2017-10-06 15:05


origen


Respuestas:


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 un ejemplo que se desvanece en alerta después de 3 segundos http://jsfiddle.net/QAz2U/3/

Respuesta larga:

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

Bootstrap usa transiciones CSS3, que tienen mucho mejor rendimiento. Lo que es importante para 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 este rendimiento es tan importante? Las personas que usan navegadores y hardware antiguos obtendrán transiciones entrecortadas con jQuery.fade (). Lo mismo ocurre con el hardware antiguo con navegadores modernos. Con las transiciones CSS3, las personas que usan navegadores modernos obtendrán una animación uniforme incluso con hardware antiguo, y las personas que utilicen navegadores antiguos que no admitan transiciones CSS verán instantáneamente el elemento emergente, que creo que es una mejor experiencia de usuario que las animaciones entrecortadas.

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

HTML (aviso 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 mediante transiciones CSS3 :-)

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


136
2017-11-06 19:05



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

27
2017-12-15 01:17



Puede desvanecerse en una caja usando jquery. Utilice bootstraps incorporados en la clase 'hide' para establecer efectivamente la pantalla: 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 usa 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 oficial de documentación de jQuery: http://api.jquery.com/fadeIn/

Solo una nota al margen, si no estás usando jquery, puedes agregar la clase 'ocultar' a tu propio archivo CSS, o simplemente agregar esto a tu div:

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

Su div se establecerá básicamente como oculto por defecto, y luego jQuery realizará la acción de fundido de entrada, forzando que se muestre div.


17
2017-10-06 15:35



Para 2.3 y superior, solo agrega:

$(".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.


8
2018-02-21 23:34



Añadir hide clase a alert-message. A continuación, 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 múltiples 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);
   });
});

6
2017-12-15 01:10



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

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

Para un efecto de fundido de entrada y luego de fundido de salida, acabo de utilizar la siguiente función y utilicé 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>

4
2018-01-09 16:30



No estoy de acuerdo con la forma en que usa Bootstrap 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 fade y in, y para evitar ese patrón en general (que actualmente se ve en la respuesta mejor calificada a esta pregunta).

(1) La semántica es incorrecta: las transiciones son temporales, pero los nombres de las clases siguen vigentes. Entonces, ¿por qué deberíamos nombrar nuestras clases fade y fade in? Debería ser faded y faded-in, de modo que cuando los desarrolladores leen el marcado, está claro que esos elementos faded o faded-in. El equipo de Bootstrap ya ha eliminado hide para hidden, por que es fade ¿algo diferente?

(2) Usando 2 clases fade y in para una sola transición contamina el espacio de clase. Y, no está claro que fade y in están asociados el uno con el otro. los in clase parece una clase completamente independiente, como alert y alert-success.

La mejor solución es usar faded cuando el elemento se ha desvanecido, y para reemplazar esa clase con faded-in cuando el elemento se ha desvanecido en

Alerta desvanecida

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

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

});

2
2018-02-20 22:26



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

Primero agrega tu HTML así:

<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, success y warning a type propiedad como opciones.


1
2017-10-13 09:53



Conseguí cerrar de esta manera mi Alerta después de 3 segundos. Espero que sea útil.

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

1
2017-10-15 14:33



Esto es muy pregunta importante y estaba luchando para lograr que se hiciera (mostrar / ocultar) el mensaje reemplazando el actual y agregando un mensaje nuevo.

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!


0
2018-05-25 07:53