Como fechar alertas automaticamente usando o Twitter Bootstrap

Estou usando o framework CSS de bootstrap do Twitter (o que é fantástico). Para algumas mensagens aos usuários, estou exibindo-as usando os alertas Javascript JS e CSS.

Para os interessados, ele pode ser encontrado aqui: http://getbootstrap.com/javascript/#alerts

Meu problema é este; depois de exibir um alerta para um usuário, gostaria que ele desaparecesse após algum intervalo de tempo. Com base nos documentos do Twitter e no código que examinei, parece que não está incluído:

• Minha primeira pergunta é um pedido de confirmação de que isso NÃO está incluído no Bootstrap
• Em segundo lugar, como posso alcançar esse comportamento?

Chamar window.setTimeout(function, delay)permitirá que você faça isso. Aqui está um exemplo que fecha automaticamente o alerta 2 segundos (ou 2.000 milissegundos) depois de ser exibido.

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

Se você quiser envolvê-lo em uma função bacana, você pode fazer isso.

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

Então você pode usá-lo assim ...

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

Tenho certeza de que existem maneiras mais elegantes de fazer isso.

Eu também não consegui fazer funcionar com o alerta. ('Fechar').

No entanto, estou usando isso e funciona muito bem! O alerta desaparecerá após 5 segundos e, uma vez removido, o conteúdo abaixo dele deslizará para sua posição natural.

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

Eu tive o mesmo problema ao tentar lidar com alertas popping e atenuá-los. Procurei em vários lugares e descobri que essa era a minha solução. Adicionar e remover a classe 'in' corrigiu meu problema.

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

}, 5000);

Ao usar .remove () e, da mesma forma, a solução .alert ('close'), parecia que encontrei um problema com o alerta sendo removido do documento, portanto, se eu quisesse usar o mesmo alerta div novamente, não consegui. Esta solução significa que o alerta pode ser reutilizado sem atualizar a página. (Eu estava usando o aJax para enviar um formulário e apresentar feedback ao usuário)

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

Usar a ação 'fechar' no alerta não funciona para mim, porque ela remove o alerta do DOM e eu preciso do alerta várias vezes (estou postando dados com ajax e mostro uma mensagem para o usuário em cada postagem) . Por isso criei esta função que cria o alerta sempre que preciso e depois inicia um cronômetro para fechar o alerta criado. Passo para a função o id do container ao qual desejo anexar o alerta, o tipo de alerta ('sucesso', 'perigo', etc.) e a mensagem. Aqui está o meu 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 é a versão do coffescript:

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

Com cada uma das soluções acima, continuei a perder a reutilização do alerta. Minha solução foi a seguinte:

No carregamento da página

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

Uma vez que o alerta precisava ser exibido

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

Observe que fadeTo define a opacidade como 0, então a exibição era nenhuma e a opacidade era 0, por isso removi da minha solução.

Depois de examinar algumas das respostas aqui e em outro tópico, aqui está o que eu terminei:

Criei uma função chamada showAlert()que adicionaria dinamicamente um alerta, com um opcional typee closeDealy. Para que você possa, por exemplo, adicionar um alerta do tipo danger(ou seja, alerta-perigo do Bootstrap) que fechará automaticamente após 5 segundos, assim:

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

Para isso, adicione a seguinte função 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);     
}

Eu precisava de uma solução muito simples para esconder algo depois de algum tempo e consegui fazer isso funcionar:

No angular, você pode fazer isso:

$timeout(self.hideError,2000);

Aqui está a função que chamo quando o tempo limite é atingido

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

Portanto, agora meu diálogo / ui pode usar essas propriedades para ocultar elementos.

Com atraso e desvanecimento:

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

tente este

$(function () {

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

        }, 3000)

});