Cómo cerrar alertas automáticamente usando Twitter Bootstrap

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?

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.

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

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

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

Esta es la versión coffescript:

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

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.

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

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.

Con retraso y desvanecimiento:

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

prueba este

$(function () {

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

        }, 3000)

});