Muszę zadzwonić do powiadomienia, gdy kliknę przycisk Dodaj do listy życzeń i powinien zniknąć w ciągu 2 sekund. Tak próbowałem, ale alert znika natychmiast, gdy tylko się pojawi. Nie wiem, gdzie jest błąd… Czy ktoś może mi pomóc?
JS Script
$(document).ready (function(){
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").alert();
window.setTimeout(function () {
$("#success-alert").alert('close');
}, 2000);
});
});
Kod HTML:
<div class="product-options">
<a id="myWish" href="" class="btn btn-mini">Add to Wishlist </a>
<a href="#" class="btn btn-mini"> Purchase </a>
</div>
Alert Box:
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success!</strong>
Product have added to your wishlist.
</div>
javascript
html
twitter-bootstrap
alert
srikanth_naalla
źródło
źródło
Odpowiedzi:
Aby uzyskać płynne przesuwanie:
źródło
data-dimiss="alert"
atrybutu. Zaktualizuje skrypt.Użycie elementu,
fadeTo()
który blaknie do krycia 500 w ciągu 2 sekund w kodzie „I Can Has Kittenz”, jest dla mnie nieczytelne. Myślę, że lepiej jest używać innych opcji, takich jak opóźnienie ()źródło
Dlaczego wszystkie inne odpowiedzi
slideUp
są po prostu poza mną. Ponieważ używam klasfade
iin
, aby ostrzeżenie znikało po zamknięciu (lub po przekroczeniu limitu czasu), nie chcę, aby „ślizgał się” i powodował konflikt z tym.Poza tym
slideUp
metoda nawet nie zadziałała. Sam alert w ogóle się nie pojawił. Oto, co zadziałało idealnie dla mnie:źródło
Uważam, że to lepsze rozwiązanie
źródło
jeszcze jedno rozwiązanie tego problemu Automatycznie zamknij lub zniknij komunikat ostrzegawczy ładowania początkowego po 5 sekundach:
Oto kod HTML używany do wyświetlania wiadomości:
źródło
Gdzie parametry fadeTo to fadeTo (prędkość, krycie)
źródło
Tygrysy automatycznie i ręcznie w razie potrzeby
źródło
Jest to dobre podejście do wyświetlania i wyświetlania animacji przy użyciu jQuery
źródło
Kontroler C #:
Strona Razor:
Automatyczne zamknięcie dowolnego alertu:
źródło