Durch Datenentlassung wird das Element vollständig entfernt. Verwenden Sie stattdessen die .hide () -Methode von jQuery.
Die Fix-It-Quick-Methode:
Verwenden Sie Inline-Javascript, um das Element beim Klicken wie folgt auszublenden:
<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/
Dies sollte jedoch nur verwendet werden, wenn Sie faul sind (was nicht gut ist, wenn Sie eine wartbare App wünschen).
Die Do-it-Right-Methode:
Erstellen Sie ein neues Datenattribut zum Ausblenden eines Elements.
Javascript:
$(function(){
$("[data-hide]").on("click", function(){
$("." + $(this).attr("data-hide")).hide()
// -or-, see below
// $(this).closest("." + $(this).attr("data-hide")).hide()
})
})
und ändern Sie dann im Markup die Option "Daten entlassen" in "Daten ausblenden". Beispiel bei jsfiddle .
$("." + $(this).attr("data-hide")).hide()
Dadurch werden alle Elemente mit der in data-hide angegebenen Klasse ausgeblendet, dh: data-hide="alert"
Alle Elemente mit der Alert-Klasse werden ausgeblendet.
Xeon06 bot eine alternative Lösung:
$(this).closest("." + $(this).attr("data-hide")).hide()
Dadurch wird nur das nächstgelegene übergeordnete Element ausgeblendet. Dies ist sehr nützlich, wenn Sie nicht jeder Warnung eine eindeutige Klasse zuweisen möchten. Bitte beachten Sie jedoch, dass Sie die Schaltfläche zum Schließen in der Warnung platzieren müssen.
Definition von .closest from jquery doc :
Rufen Sie für jedes Element in der Menge das erste Element ab, das dem Selektor entspricht, indem Sie das Element selbst testen und seine Vorfahren im DOM-Baum durchlaufen.
alert
) auf der Seite hat. Eine Lösung hierfür wäre, den Inhalt des Rückrufs durch diese Zeile zu ersetzen$(this).closest("." + $(this).attr("data-hide")).hide();
, die nur das nächstgelegene übergeordnete Element betrifft, da die Schaltfläche zum Schließen normalerweise in der betroffenen Warnung platziert ist.Ich habe gerade eine Modellvariable verwendet, um den Dialog ein- / auszublenden, und die entfernt
data-dismiss="alert"
Beispiel:
arbeitet für mich und stoppt die Notwendigkeit, zur Abfrage zu gehen
quelle
Ich denke, ein guter Ansatz für dieses Problem wäre, den
close.bs.alert
Ereignistyp von Bootstrap zu nutzen, um die Warnung auszublenden, anstatt sie zu entfernen. Der Grund, warum Bootstrap diesen Ereignistyp verfügbar macht, besteht darin, dass Sie das Standardverhalten beim Entfernen der Warnung aus dem DOM überschreiben können.quelle
Wenn Sie eine MVVM-Bibliothek wie knockout.js verwenden (was ich sehr empfehle), können Sie dies sauberer tun:
http://jsfiddle.net/bce9gsav/5/
quelle
data-bind="click:function(){showAlert(false);}
ist ein perfektes Beispiel für aufdringliches Javascript, das alles andere als sauber ist . Ich empfehle dringend , diesem Ansatz NICHT zu folgendata-bind
Attribut stackoverflow.com/questions/13451414/unobtrusive-knockoutWenn Sie also eine Lösung suchen, die mit dynamischen HTML-Seiten umgehen kann, wie Sie sie bereits enthalten, sollten Sie jQuery's Live verwenden, um den Handler für alle Elemente festzulegen, die sich jetzt und in Zukunft im Dom befinden oder entfernt werden.
ich benutze
quelle
Das hat bei mir am besten funktioniert:
quelle
Ich bin auch auf dieses Problem gestoßen, und das Problem beim einfachen Hacken der Schaltfläche zum Schließen besteht darin, dass ich weiterhin Zugriff auf die Standardereignisse zum Schließen von Bootstrap-Warnungen benötige.
Meine Lösung bestand darin, ein kleines, anpassbares JQuery-Plugin zu schreiben einen ordnungsgemäß gestalteten Bootstrap 3-Alarm (mit oder ohne Schließen-Taste nach Bedarf) einfügt und es Ihnen ermöglicht, ihn nach dem Schließen der Box einfach neu zu generieren.
Verwendung, Tests und Beispiele finden Sie unter https://github.com/davesag/jquery-bs3Alert .
quelle
Ich stimme der Antwort von Henrik Karlsson zu, die von Martin Prikryl bearbeitet wurde. Ich habe einen Vorschlag, der auf der Zugänglichkeit basiert. Ich würde .attr ("aria-hidden", "true") am Ende hinzufügen, so dass es so aussieht:
quelle
Alle oben genannten Lösungen verwenden externe Bibliotheken, entweder Angular oder jQuery, und eine alte Version von Bootstrap. Hier ist also die Lösung von Charles Wyke-Smith in reinem JavaScript , die auf Bootstrap 4 angewendet wird . Ja, Bootstrap benötigt jQuery für seinen eigenen Modal- und Warncode, aber nicht mehr jeder schreibt seinen eigenen Code mit jQuery.
Hier ist das HTML der Warnung:
Beachten Sie, dass die Warnung zunächst ausgeblendet ist (
style="display: none;"
) und anstelle des Standardsdata-dismiss="alert"
hier verwendet wurdedata-hide="alert"
.Hier ist das JavaScript, um die Warnung anzuzeigen und die Schaltfläche zum Schließen zu überschreiben:
Wenn Sie die Warnung an anderer Stelle im Code programmgesteuert ausblenden oder anzeigen möchten, tun Sie einfach
myAlert.style.display = 'none';
odermyAlert.style.display = 'block';
.quelle
Das Problem wird durch die Verwendung von verursacht
style="display:none"
. Sie sollten die Warnung mit Javascript ausblenden oder zumindest beim Anzeigen das Stilattribut entfernen.quelle
Basierend auf den anderen Antworten und dem Ändern der Datenentlassung in Datenverstecken behandelt dieses Beispiel das Öffnen der Warnung über einen Link und ermöglicht das wiederholte Öffnen und Schließen der Warnung
quelle
Ich habe alle Methoden ausprobiert und der beste Weg für mich ist die Verwendung der integrierten Bootstrap-Klassen
.fade
und.in
Beispiel:
Hinweis: Fügen Sie in jQuery addClass ('in') hinzu, um die Warnung anzuzeigen, und removeClass ('in'), um sie auszublenden.
Lustige Tatsache: Dies funktioniert für alle Elemente. Nicht nur Warnungen.
quelle
Hier ist eine Lösung, die auf der Antwort von Henrik Karlsson basiert, aber eine ordnungsgemäße Ereignisauslösung aufweist (basierend auf Bootstrap-Quellen ):
Die Antwort vor allem für mich als Notiz.
quelle
Kann dies nicht einfach durch Hinzufügen eines zusätzlichen "Container" -Divs und Hinzufügen des entfernten Alarm-Divs jedes Mal erfolgen. Scheint für mich zu arbeiten?
HTML
JS
quelle