Jak automatycznie zamykać alerty za pomocą Twittera Bootstrap

90

Używam frameworka CSS bootstrap na Twitterze (co jest fantastyczne). W przypadku niektórych wiadomości do użytkowników wyświetlam je za pomocą alertów Javascript JS i CSS.

Dla zainteresowanych można ją znaleźć tutaj: http://getbootstrap.com/javascript/#alerts

Mój problem jest taki; po wyświetleniu ostrzeżenia użytkownikowi chciałbym, aby po pewnym czasie zniknął. Na podstawie dokumentacji twittera i kodu, który przejrzałem, wygląda na to, że nie jest to upieczone:

  • Moje pierwsze pytanie dotyczy prośby o potwierdzenie, że to rzeczywiście NIE jest wypiekane w Bootstrap
  • Po drugie, jak mogę osiągnąć takie zachowanie?
Mario Zigliotto
źródło
Spójrz tutaj stackoverflow.com/questions/23101966/ ... to najlepsza odpowiedź, jaką znalazłem
Andres

Odpowiedzi:

108

Połączenie telefoniczne window.setTimeout(function, delay)pozwoli ci to osiągnąć. Oto przykład, który automatycznie zamknie alert 2 sekundy (lub 2000 milisekund) po jego wyświetleniu.

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

Jeśli chcesz zawrzeć to w sprytnej funkcji, możesz to zrobić.

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

Wtedy możesz go tak używać ...

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

Jestem pewien, że istnieją bardziej eleganckie sposoby na osiągnięcie tego.

jessegavin
źródło
Hej, jesse, dziękuję! setTimeout działa i wybiorę go jako prawidłowe rozwiązanie, ale wygląda na to, że zachowanie powinno w rzeczywistości zostać zapieczętowane, jak stwierdził TK Kocheran (i zalogował się).
Mario Zigliotto
Spojrzałem na kod bootstrap na Twitterze i nie widziałem żadnego wsparcia dla alertów automatycznego zamykania.
jessegavin
Tak - czekam na odpowiedź TK, ponieważ z jego wiadomości tutaj wydaje się, że funkcja automatycznego zamykania powinna tam być, a nie ma - ale raport błędu na githubie nie ma o tym wzmianki.
Mario Zigliotto
Tak, nie twierdzą, że są w stanie automatycznie zamknąć alerty, tylko po to, aby móc je programowo zamknąć za pomocą dostarczonej wtyczki jQuery. tj. $('#myAlert').alert('close')nie działa zgodnie z reklamą.
Naftuli Kay
Może chcesz przedłużyć jQuery i wysyła tę metodę od obiektu, takich jak: $('#my_fancy_alert').createAutoClosingAlert(2000). Trzeba tylko przejść $(this).remove()lub $(this).alert('close')w setTimeoutzwrotnego.
aL3xa
99

Nie mogłem zmusić go do pracy z alertem. („Zamknij”).

Jednak używam tego i działa świetnie! Alert zniknie po 5 sekundach, a gdy zniknie, zawartość poniżej przesunie się do swojej naturalnej pozycji.

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);
moogboy
źródło
Zdecydowanie świetne rozwiązanie. Po krótkiej przerwie ostrzeżenie bardzo ładnie gaśnie. Wygląda bardzo profesjonalnie.
Matt Setter
Działa szybko i świetnie.
Mohamed Anis Dahmani,
1
Czy to musi być wywoływane za każdym razem, gdy wyświetlany jest alert, czy też działa automatycznie dla wszystkich alertów z klasą .alert-message? Kłopoty, klasa na moim wpisem BS3 jest alert alert-danger alert-block, więc należy używać .alert, alert-dangerlub pełną nazwę klasy w funkcji limitu czasu?
rafian
@raffian Umieść to w ten sposób: $(".alert-message,.alert-danger,.alert-info")i tak dalej. Musisz dowiedzieć się, czy chcesz go umieścić w całej witrynie, czy nie. Jeśli chcesz, aby był na każdej stronie, na przykład w ostrzu Laravela, możesz użyć czegoś takiego jak @include ('scripts-alerts') lub @yield ('alerts'). Musisz wymyślić lub zadać konkretne pytanie w stackoverflow, a nie tutaj ...
Pathros
1
Najlepszy sposób na zrobienie tego. Powinien być oznaczony jako poprawna odpowiedź @Mario Zigliotto, ponieważ inne elementy przesuwają się powoli i nie zmieniają od razu swojej pozycji. To wygląda o wiele piękniej i bardziej profesjonalnie.
Torsten Barthel
4

Miałem ten sam problem, gdy próbowałem obsługiwać wyskakujące alerty i ich zanikanie. Szukałem w różnych miejscach i znalazłem to moje rozwiązanie. Dodanie i usunięcie klasy „in” rozwiązało mój problem.

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

}, 5000);

Podczas korzystania z .remove () i podobnego rozwiązania .alert ('close') wydawało mi się, że napotkałem problem z usuwaniem alertu z dokumentu, więc jeśli chciałem ponownie użyć tego samego elementu div alertu, nie byłem w stanie. To rozwiązanie oznacza, że ​​alert można ponownie wykorzystać bez odświeżania strony. (Używałem aJax do przesłania formularza i przedstawienia opinii użytkownikowi)

    $('#Some_Button_Or_Event_Here').click(function () { // Show alert message
        $('#alert_message').addClass('in'); 
    });
Mark Daniel
źródło
3

Użycie akcji `` zamknij '' na alercie nie działa dla mnie, ponieważ usuwa alert z DOM i potrzebuję alertu wiele razy (wysyłam dane za pomocą Ajax i pokazuję wiadomość użytkownikowi w każdym poście) . Dlatego stworzyłem tę funkcję, która tworzy alert za każdym razem, gdy go potrzebuję, a następnie uruchamia licznik czasu, aby zamknąć utworzony alert. Do funkcji przekazuję identyfikator kontenera, do którego chcę dołączyć alert, typ alertu („sukces”, „niebezpieczeństwo” itp.) Oraz wiadomość. Oto mój kod:

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
źródło
2

To jest wersja Coffescript:

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000
Johniboy
źródło
2

Z każdym z powyższych rozwiązań nadal traciłem możliwość ponownego użycia alertu. Moje rozwiązanie było następujące:

Podczas ładowania strony

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

Gdy alert musiał zostać wyświetlony

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

Zauważ, że fadeTo ustawia krycie na 0, więc wyświetlacz był brak, a krycie było 0, dlatego usunąłem z mojego rozwiązania.

biggles
źródło
0

Po przejrzeniu niektórych odpowiedzi tutaj i w innym wątku, oto, co skończyłem:

Utworzyłem funkcję o nazwie showAlert(), która dynamicznie dodawałaby alert, z opcjonalnym typei closeDealy. Abyś mógł na przykład dodać alert typu danger(tj. Alert-niebezpieczeństwo Bootstrapa), który zamknie się automatycznie po 5 sekundach:

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

Aby to osiągnąć, dodaj następującą funkcję 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
źródło
0

Potrzebowałem bardzo prostego rozwiązania, aby po jakimś czasie coś ukryć i udało mi się to zadziałać:

W kątowym możesz to zrobić:

$timeout(self.hideError,2000);

Oto funkcja, którą wywołuję po osiągnięciu limitu czasu

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

Więc teraz moje okno dialogowe / interfejs użytkownika może używać tych właściwości do ukrywania elementów.

leeroya
źródło
0

Z opóźnieniem i zanikaniem:

setTimeout(function(){
    $(".alert").each(function(index){
        $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
            $(this).remove();
        });
    });
},2000);
GigolNet Guigolachvili
źródło
0

Spróbuj tego

$(function () {

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

        }, 3000)

});
Danny
źródło