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?
javascript
jquery
css
twitter-bootstrap
alert
Mario Zigliotto
źródło
źródło
Odpowiedzi:
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.
źródło
$('#myAlert').alert('close')
nie działa zgodnie z reklamą.$('#my_fancy_alert').createAutoClosingAlert(2000)
. Trzeba tylko przejść$(this).remove()
lub$(this).alert('close')
wsetTimeout
zwrotnego.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);
źródło
.alert-message
? Kłopoty, klasa na moim wpisem BS3 jestalert alert-danger alert-block
, więc należy używać.alert
,alert-danger
lub pełną nazwę klasy w funkcji limitu czasu?$(".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 ...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'); });
źródło
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); }
źródło
To jest wersja Coffescript:
setTimeout -> $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove())) ,5000
źródło
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.
źródło
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 opcjonalnymtype
icloseDealy
. Abyś mógł na przykład dodać alert typudanger
(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("×") ) .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); }
źródło
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.
źródło
Z opóźnieniem i zanikaniem:
setTimeout(function(){ $(".alert").each(function(index){ $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){ $(this).remove(); }); }); },2000);
źródło
Spróbuj tego
$(function () { setTimeout(function () { if ($(".alert").is(":visible")){ //you may add animate.css class for fancy fadeout $(".alert").fadeOut("fast"); } }, 3000) });
źródło