Odrzucenie danych całkowicie usuwa element. Zamiast tego użyj metody .hide () jQuery.
Szybka metoda naprawy:
Używanie wbudowanego javascript do ukrycia elementu onclick w następujący sposób:
<div class="alert" style="display: none">
<a class="close" onclick="$('.alert').hide()">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<a href="#" onclick="$('alert').show()">show</a>
http://jsfiddle.net/cQNFL/
Powinno to jednak być używane tylko wtedy, gdy jesteś leniwy (co nie jest dobre, jeśli potrzebujesz aplikacji, którą można utrzymać).
Metoda zrób to dobrze:
Utwórz nowy atrybut danych w celu ukrycia elementu.
JavaScript:
$(function(){
$("[data-hide]").on("click", function(){
$("." + $(this).attr("data-hide")).hide()
// -or-, see below
// $(this).closest("." + $(this).attr("data-hide")).hide()
})
})
a następnie zmień odrzucanie danych na ukrywanie danych w znacznikach. Przykład na jsfiddle .
$("." + $(this).attr("data-hide")).hide()
Spowoduje to ukrycie wszystkich elementów z klasą określoną w data-hide, tj .: data-hide="alert"
ukryje wszystkie elementy z klasą alert.
Xeon06 dostarczył alternatywne rozwiązanie:
$(this).closest("." + $(this).attr("data-hide")).hide()
Spowoduje to ukrycie tylko najbliższego elementu nadrzędnego. Jest to bardzo przydatne, jeśli nie chcesz przypisywać każdemu alertowi unikalnej klasy. Należy jednak pamiętać, że w alercie należy umieścić przycisk zamykania.
Definicja .closest z dokumentu jquery :
Dla każdego elementu w zestawie pobierz pierwszy element, który pasuje do selektora, testując sam element i przechodząc przez jego przodków w drzewie DOM.
alert
) Na stronie. Rozwiązaniem byłoby zastąpienie treści wywołania zwrotnego tą linią$(this).closest("." + $(this).attr("data-hide")).hide();
, co wpłynie tylko na najbliższy element nadrzędny, ponieważ przycisk odrzucenia jest zwykle umieszczony w alercie, na który ma wpływ.Właśnie użyłem zmiennej modelu, aby pokazać / ukryć okno dialogowe i usunąłem plik
data-dismiss="alert"
Przykład:
działa dla mnie i nie ma potrzeby wychodzenia do jquery
źródło
Myślę, że dobrym podejściem do tego problemu byłoby skorzystanie z
close.bs.alert
typu zdarzenia Bootstrap, aby ukryć alert zamiast go usuwać. Powodem, dla którego Bootstrap ujawnia ten typ zdarzenia, jest to, że możesz nadpisać domyślne zachowanie polegające na usuwaniu alertu z DOM.źródło
Jeśli używasz biblioteki MVVM, takiej jak knockout.js (co bardzo polecam), możesz to zrobić w bardziej przejrzysty sposób:
http://jsfiddle.net/bce9gsav/5/
źródło
data-bind="click:function(){showAlert(false);}
jest doskonałym przykładem natrętnego javascript, który nie jest bardziej przejrzysty . Zdecydowanie polecam NIE stosować tego podejściadata-bind
atrybutu stackoverflow.com/questions/13451414/unobtrusive-knockoutJeśli więc potrzebujesz rozwiązania, które poradzi sobie z dynamicznymi stronami html, ponieważ już je dołączasz, powinieneś użyć live jQuery, aby ustawić obsługę wszystkich elementów, które są teraz iw przyszłości w dom lub zostaną usunięte.
używam
źródło
To zadziałało dla mnie najlepiej:
źródło
Natknąłem się również na ten problem, a problem z hakowaniem przycisku zamykania polega na tym, że nadal potrzebuję dostępu do standardowych zdarzeń typu alert-close podczas ładowania początkowego.
Moim rozwiązaniem było napisanie małej, dostosowywalnej wtyczki jquery która wstrzykuje odpowiednio uformowany alert Bootstrap 3 (z przyciskiem zamykania lub bez, jak tego potrzebujesz) przy minimalnym zamieszaniu i pozwala łatwo go zregenerować po zamknięciu pudełka.
Zobacz https://github.com/davesag/jquery-bs3Alert, aby uzyskać informacje na temat użycia, testów i przykładów.
źródło
Zgadzam się z odpowiedzią zamieszczoną przez Henrika Karlssona i zredagowaną przez Martina Prikryla. Mam jedną sugestię dotyczącą dostępności. Dodałbym .attr ("aria-hidden", "true") na końcu, tak aby wyglądało to tak:
źródło
Wszystkie powyższe rozwiązania wykorzystują zewnętrzne biblioteki, angular lub jQuery oraz starą wersję Bootstrap. Oto rozwiązanie Charlesa Wyke-Smitha w czystym JavaScript , zastosowane w Bootstrap 4 . Tak, Bootstrap wymaga jQuery jako własnego kodu modalnego i alertów, ale nie każdy już pisze swój własny kod za pomocą jQuery.
Oto html alertu:
Zauważ, że początkowo alert jest ukryty (
style="display: none;"
), a zamiast standardudata-dismiss="alert"
użyliśmy tutajdata-hide="alert"
.Oto JavaScript, który pokazuje alert i zastępuje przycisk zamykania:
Jeśli chcesz programowo ukryć lub pokazać alert w innym miejscu kodu, po prostu zrób
myAlert.style.display = 'none';
lubmyAlert.style.display = 'block';
.źródło
Problem jest spowodowany użyciem
style="display:none"
, powinieneś ukryć alert za pomocą JavaScript lub przynajmniej podczas jego wyświetlania usunąć atrybut style.źródło
W oparciu o inne odpowiedzi i zmianę odrzucania danych na ukrywanie danych, ten przykład obsługuje otwieranie alertu z linku i umożliwia wielokrotne otwieranie i zamykanie alertu
źródło
Wypróbowałem wszystkie metody i najlepszym sposobem jest dla mnie użycie wbudowanych klas ładowania początkowego
.fade
i.in
Przykład:
Uwaga: w jQuery dodajClass („in”), aby wyświetlić alert, usuńClass („in”), aby go ukryć.
Ciekawostka: działa to dla wszystkich elementów. Nie tylko alerty.
źródło
Oto rozwiązanie oparte na odpowiedź przez Henrik Karlsson ale z właściwego zdarzenia wyzwalającego (na podstawie źródeł Bootstrap ):
Odpowiedź głównie dla mnie, jako notatka.
źródło
Czy nie można tego zrobić po prostu dodając dodatkowy element div „container” i za każdym razem dodając z powrotem usunięty element div alert. Wydaje mi się, że to działa dla mnie?
HTML
JS
źródło