Cómo cerrar alertas automáticamente usando Twitter Bootstrap

90

Estoy usando el marco CSS bootstrap de Twitter (que es fantástico). Para algunos mensajes a los usuarios, los estoy mostrando usando las alertas Javascript JS y CSS.

Para aquellos interesados, se puede encontrar aquí: http://getbootstrap.com/javascript/#alerts

Mi problema es este; después de mostrar una alerta a un usuario, me gustaría que desapareciera después de un intervalo de tiempo. Según los documentos de Twitter y el código que he revisado, parece que esto no está integrado:

  • Mi primera pregunta es una solicitud de confirmación de que esto NO está incluido en Bootstrap
  • En segundo lugar, ¿cómo puedo lograr este comportamiento?
Mario Zigliotto
fuente
Eche un vistazo aquí stackoverflow.com/questions/23101966/ ... Esa es la mejor respuesta que encontré
Andrés

Respuestas:

108

Llamar window.setTimeout(function, delay)le permitirá lograr esto. Aquí hay un ejemplo que cerrará automáticamente la alerta 2 segundos (o 2000 milisegundos) después de que se muestre.

$(".alert-message").alert();
window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);

Si desea envolverlo en una función ingeniosa, puede hacer esto.

function createAutoClosingAlert(selector, delay) {
   var alert = $(selector).alert();
   window.setTimeout(function() { alert.alert('close') }, delay);
}

Entonces podrías usarlo así ...

createAutoClosingAlert(".alert-message", 2000);

Estoy seguro de que hay formas más elegantes de lograrlo.

jessegavin
fuente
¡Oye, jesse, gracias! el setTimeout funciona y lo seleccionaré como una solución válida, pero parece que el comportamiento debería, de hecho, estar integrado como TK Kocheran declaró (y registró).
Mario Zigliotto
Miré el código de arranque de Twitter y no vi ningún soporte para alertas de cierre automático.
jessegavin
Sí, estoy esperando la respuesta de TK porque de su mensaje aquí parece que la funcionalidad de cierre automático debería estar allí y no lo está, pero el informe de error en github no hace referencia a eso.
Mario Zigliotto
Sí, no afirman poder cerrar automáticamente las alertas, solo para poder cerrarlas mediante programación con el complemento jQuery proporcionado. es decir $('#myAlert').alert('close'), no funciona como se anuncia.
Naftuli Kay
Es posible que desee extender jQuery y despachar ese método fuera del objeto, como: $('#my_fancy_alert').createAutoClosingAlert(2000). Solo necesitas pasar $(this).remove()o $(this).alert('close')entrarsetTimeout devolución de llamada.
aL3xa
99

Tampoco pude hacer que funcione con alert. ('Close').

¡Sin embargo, estoy usando esto y funciona de maravilla! La alerta desaparecerá después de 5 segundos y, una vez desaparecida, el contenido que se encuentra debajo se deslizará hasta su posición natural.

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);
moogboy
fuente
Definitivamente una gran solución. La alerta se desvanece muy bien después de un breve intervalo. Parece muy profesional.
Matt Setter
Trabajando rápido y muy bien.
Mohamed Anis Dahmani
1
¿Es necesario llamar a esto cada vez que se muestra la alerta o funciona automáticamente para todas las alertas con clase .alert-message? Tiene problemas, la clase de mi alerta de BS3 es alert alert-danger alert-block, por lo que debe utilizar .alert, alert-dangero el nombre completo de la clase en la función de tiempo de espera?
raffian
@raffian Póngalo así: $(".alert-message,.alert-danger,.alert-info")y así sucesivamente. Tienes que averiguar si lo quieres en todo tu sitio web o no. Si lo quieres en cada página, por ejemplo, en la hoja de Laravel puedes usar algo como @include ('scripts-alerts') o @yield ('alertas'). Tienes que averiguar o hacer una pregunta específica en stackoverflow y no aquí ...
Pathros
1
La mejor manera de hacer esto. Debe marcarse como la respuesta correcta @Mario Zigliotto ya que otros elementos se deslizan hacia arriba lentamente y no cambian de posición de inmediato. Eso se ve mucho más hermoso y profesional.
Torsten Barthel
4

Tuve el mismo problema al intentar manejar las alertas emergentes y desvanecerlas. Busqué en varios lugares y encontré que esta era mi solución. Agregar y eliminar la clase 'en' solucionó mi problema.

window.setTimeout(function() { // hide alert message
    $("#alert_message").removeClass('in'); 

}, 5000);

Al usar .remove () y, de manera similar, la solución .alert ('close'), me pareció que tuve un problema con la eliminación de la alerta del documento, por lo que si quería usar el mismo div de alerta nuevamente, no podía hacerlo. Esta solución significa que la alerta es reutilizable sin actualizar la página. (Estaba usando aJax para enviar un formulario y presentar comentarios al usuario)

    $('#Some_Button_Or_Event_Here').click(function () { // Show alert message
        $('#alert_message').addClass('in'); 
    });
Mark Daniel
fuente
3

Usar la acción 'cerrar' en la alerta no funciona para mí, porque elimina la alerta del DOM y necesito la alerta varias veces (estoy publicando datos con ajax y le muestro un mensaje al usuario en cada publicación) . Así que creé esta función que crea la alerta cada vez que la necesito y luego inicia un temporizador para cerrar la alerta creada. Paso a la función el id del contenedor al que quiero agregar la alerta, el tipo de alerta ('éxito', 'peligro', etc.) y el mensaje. Aquí está mi código:

function showAlert(containerId, alertType, message) {
    $("#" + containerId).append('<div class="alert alert-' + alertType + '" id="alert' + containerId + '">' + message + '</div>');
    $("#alert" + containerId).alert();
    window.setTimeout(function () { $("#alert" + containerId).alert('close'); }, 2000);
}
Daniele Armanasco
fuente
2

Esta es la versión coffescript:

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000
Johniboy
fuente
2

Con cada una de las soluciones anteriores, seguí perdiendo la capacidad de reutilización de la alerta. Mi solución fue la siguiente:

En la carga de la página

$("#success-alert").hide();

Una vez que se necesitaba mostrar la alerta

 $("#success-alert").show();
 window.setTimeout(function () {
     $("#success-alert").slideUp(500, function () {
          $("#success-alert").hide();
      });
 }, 5000);

Tenga en cuenta que fadeTo establece la opacidad en 0, por lo que la pantalla no era ninguna y la opacidad era 0, por lo que eliminé mi solución.

Biggles
fuente
0

Después de repasar algunas de las respuestas aquí y en otro hilo, esto es lo que terminé con:

Creé una función llamada showAlert()que agregaría dinámicamente una alerta, con un opcional typey closeDealy. Para que pueda, por ejemplo, agregar una alerta de tipo danger(es decir, alerta-peligro de Bootstrap) que se cerrará automáticamente después de 5 segundos así:

showAlert("Warning message", "danger", 5000);

Para lograrlo, agregue la siguiente función de Javascript:

function showAlert(message, type, closeDelay) {

    if ($("#alerts-container").length == 0) {
        // alerts-container does not exist, add it
        $("body")
            .append( $('<div id="alerts-container" style="position: fixed;
                width: 50%; left: 25%; top: 10%;">') );
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div class="alert alert-' + type + ' fade in">')
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $("#alerts-container").prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}
isapir
fuente
0

Necesitaba una solución muy simple para ocultar algo después de un tiempo y logré que esto funcionara:

En angular puedes hacer esto:

$timeout(self.hideError,2000);

Aquí está la función a la que llamo cuando se ha alcanzado el tiempo de espera

 self.hideError = function(){
   self.HasError = false;
   self.ErrorMessage = '';
};

Así que ahora mi diálogo / ui puede usar esas propiedades para ocultar elementos.

leeroya
fuente
0

Con retraso y desvanecimiento:

setTimeout(function(){
    $(".alert").each(function(index){
        $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
            $(this).remove();
        });
    });
},2000);
GigolNet Guigolachvili
fuente
0

prueba este

$(function () {

 setTimeout(function () {
            if ($(".alert").is(":visible")){
                 //you may add animate.css class for fancy fadeout
                $(".alert").fadeOut("fast");
            }

        }, 3000)

});
danny
fuente