90 votos

Cómo cerrar automáticamente alertas usando Twitter Bootstrap

Estoy usando bootstrap de twitter framework CSS (que es fantástico). Algunos mensajes de usuarios estoy mostrando el uso de las alertas de Javascript JS y CSS.

Para los interesados, puede ser encontrado aquí: http://getbootstrap.com/javascript/#alerts

Mi problema es este; después he mostrará un mensaje de alerta a un usuario me gustaría que sólo desaparecen después de algún intervalo de tiempo. Basado en twitter docs y el código que he mirado a través de este aspecto es que no se cuece en:

  • Mi primera pregunta es una solicitud de confirmación de que este es, de hecho, NO se cuece en Bootstrap
  • En segundo lugar, ¿cómo puedo conseguir este comportamiento?

107voto

jessegavin Puntos 20854

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

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

Si desea envolver en una ingeniosa función usted puede hacer esto.

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

A continuación, puedes usarlo como...

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

Estoy seguro de que hay más elegantes maneras de lograr esto.

97voto

moogboy Puntos 541

No pude conseguir que funcione con alerta. ("Cerrar") tampoco.

Sin embargo, yo estoy usando este y funciona una delicia! La alerta se desvanecerá después de 5 segundos, y una vez pasado, el contenido a continuación se deslizará hasta su posición natural.

 window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);
 

3voto

Mark Daniel Puntos 31

Yo tenía este mismo problema al tratar de manejar las alertas de detonación y la decoloración. Yo he buscado en torno a los diversos lugares y encontró que este sea mi solución. Adición y eliminación de la 'en' clase solucionado mi problema.

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

}, 5000);

Cuando se utiliza .remove() y de manera similar a el .alert('close') solución me parecía golpear a un problema con la alerta se eliminan del documento, por lo que si quería usar la misma alerta div otra vez me fue imposible. Esta solución significa que la alerta es reutilizable sin actualizar la página. (Yo estaba usando aJax para enviar un formulario y presentar retroalimentación al usuario)

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

2voto

Chris Cinelli Puntos 975

Yo implementado una librería Javascript que tiene lo que usted pregunta como una característica: https://gist.github.com/1569896

2voto

Johniboy Puntos 31

Esta es la versión coffescript:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: