Come chiudere automaticamente gli avvisi utilizzando Twitter Bootstrap

Sto usando il framework CSS bootstrap di Twitter (che è fantastico). Per alcuni messaggi agli utenti li visualizzo utilizzando gli avvisi Javascript JS e CSS.

Per chi fosse interessato, può essere trovato qui: http://getbootstrap.com/javascript/#alerts

Il mio problema è questo; dopo aver mostrato un avviso a un utente, vorrei che scomparisse dopo un certo intervallo di tempo. Sulla base dei documenti di Twitter e del codice che ho esaminato, sembra che questo non sia integrato:

• La mia prima domanda è una richiesta di conferma che questo NON è effettivamente inserito in Bootstrap
• In secondo luogo, come posso ottenere questo comportamento?

La chiamata window.setTimeout(function, delay)ti consentirà di farlo. Ecco un esempio che chiuderà automaticamente l'avviso 2 secondi (o 2000 millisecondi) dopo che è stato visualizzato.

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

Se vuoi racchiuderlo in una funzione elegante, potresti farlo.

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

Quindi potresti usarlo in questo modo ...

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

Sono certo che ci sono modi più eleganti per ottenere questo risultato.

Non sono riuscito a farlo funzionare nemmeno con alert. ("Close").

Comunque lo sto usando e funziona a meraviglia! L'avviso svanirà dopo 5 secondi e, una volta terminato, il contenuto sottostante scivolerà fino alla sua posizione naturale.

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

Ho avuto lo stesso problema durante il tentativo di gestire gli avvisi scoppiettanti e di dissolverli. Ho cercato in vari luoghi e ho scoperto che questa era la mia soluzione. L'aggiunta e la rimozione della classe "in" ha risolto il problema.

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

}, 5000);

Quando si utilizza .remove () e in modo simile la soluzione .alert ('close') mi è sembrato di riscontrare un problema con l'avviso rimosso dal documento, quindi se volevo utilizzare di nuovo lo stesso div di avviso non ero in grado di farlo. Questa soluzione significa che l'avviso è riutilizzabile senza aggiornare la pagina. (Stavo usando aJax per inviare un modulo e presentare un feedback all'utente)

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

L'utilizzo dell'azione 'chiudi' sull'avviso non funziona per me, perché rimuove l'avviso dal DOM e ho bisogno dell'avviso più volte (sto postando dati con ajax e mostro un messaggio all'utente su ogni post) . Quindi ho creato questa funzione che crea l'avviso ogni volta che ne ho bisogno e poi avvia un timer per chiudere l'avviso creato. Passo nella funzione l'id del contenitore a cui voglio aggiungere l'avviso, il tipo di avviso ('successo', 'pericolo', ecc.) E il messaggio. Ecco il mio codice:

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

Questa è la versione coffescript:

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

Con ciascuna delle soluzioni precedenti ho continuato a perdere la riutilizzabilità dell'avviso. La mia soluzione era la seguente:

Al caricamento della pagina

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

Una volta che l'avviso doveva essere visualizzato

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

Nota che fadeTo imposta l'opacità su 0, quindi il display non era nessuno e l'opacità era 0, motivo per cui ho rimosso dalla mia soluzione.

Dopo aver esaminato alcune delle risposte qui e in un altro thread, ecco cosa sono finito con:

Ho creato una funzione denominata showAlert()che aggiungerebbe dinamicamente un avviso, con un'opzione typee closeDealy. In modo che tu possa, ad esempio, aggiungere un avviso di tipo danger(cioè, avviso di pericolo di Bootstrap) che si chiuderà automaticamente dopo 5 secondi in questo modo:

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

Per ottenere ciò, aggiungi la seguente funzione 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);     
}

Avevo bisogno di una soluzione molto semplice per nascondere qualcosa dopo un po 'di tempo e sono riuscito a farlo funzionare:

In angolare puoi fare questo:

$timeout(self.hideError,2000);

Ecco la funzione che chiamo quando il timeout è stato raggiunto

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

Quindi ora la mia finestra di dialogo / interfaccia utente può utilizzare queste proprietà per nascondere gli elementi.

Con ritardo e dissolvenza:

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

prova questo

$(function () {

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

        }, 3000)

});