Ich bin mit den meisten zuvor erwähnten Antworten überhaupt nicht einverstanden.
Kurze Antwort:
Lassen Sie die "in" -Klasse weg und fügen Sie sie mit jQuery hinzu, um sie einzufügen.
Sehen Sie diese jsfiddle für ein Beispiel , das Blendung in Alarm nach 3 Sekunden http://jsfiddle.net/QAz2U/3/
Lange Antwort:
Obwohl Bootstrap das Einblenden von Warnungen nicht nativ unterstützt, verwenden die meisten Antworten hier die jQuery-Überblendfunktion, die JavaScript verwendet, um das Element zu animieren (auszublenden). Der große Vorteil davon ist die browserübergreifende Kompatibilität. Der Nachteil ist die Leistung (siehe auch: jQuery, um CSS3-Fade-Animation aufzurufen? ).
Bootstrap verwendet CSS3-Übergänge, die eine weitaus bessere Leistung bieten. Was für mobile Geräte wichtig ist:
Bootstraps CSS zum Ausblenden der Warnung:
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
Warum halte ich diese Leistung für so wichtig? Personen, die alte Browser und Hardware verwenden, erhalten möglicherweise abgehackte Übergänge mit jQuery.fade (). Gleiches gilt für alte Hardware mit modernen Browsern. Verwenden von CSS3-Übergängen Benutzer moderner Browser erhalten auch mit älterer Hardware eine reibungslose Animation, und Benutzer älterer Browser, die keine CSS-Übergänge unterstützen, sehen sofort, dass das Element eingeblendet wird. Dies ist meiner Meinung nach eine bessere Benutzererfahrung als abgehackte Animationen.
Ich bin hierher gekommen, um die gleiche Antwort wie oben zu suchen: um einen Bootstrap-Alarm einzublenden. Nach einigem Eingraben in den Code und das CSS von Bootstrap ist die Antwort ziemlich einfach. Fügen Sie Ihrer Warnung nicht die Klasse "in" hinzu. Fügen Sie dies mit jQuery hinzu, wenn Sie Ihre Warnung einblenden möchten.
HTML (Beachten Sie, dass es im Unterricht KEIN gibt !)
<div id="myAlert" class="alert success fade" data-alert="alert">
</div>
Javascript:
function showAlert(){
$("#myAlert").addClass("in")
}
Durch Aufrufen der obigen Funktion wird die Klasse "in" hinzugefügt und die Warnung mithilfe von CSS3-Übergängen ausgeblendet :-)
In dieser jsfiddle finden Sie auch ein Beispiel für eine Zeitüberschreitung (danke John Lehmann!): Http://jsfiddle.net/QAz2U/3/
fade
und zugeordnetin
sind. Wie im Markup zu sehenclass="alert alert-success fade in"
. Diein
Klasse sieht aus wie eine völlig unabhängige Klasse, wiealert
oderalert-success
. Es wäre besser, den Klassennamen zu verwendenfaded-in
(undfade
sollte es auch seinfaded
), der Übergang ist vorübergehend, aber der Klassenname lebt weiter."show"
Klasse anstelle von"in"
Das, was ich benutze, ist Folgendes:
In Ihrer Vorlage einen Warnbereich
<div id="alert-area"></div>
Dann eine jQuery-Funktion zum Anzeigen einer Warnung
function newAlert (type, message) { $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>")); $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); }); } newAlert('success', 'Oh yeah!');
quelle
Sie können eine Box mit jquery einblenden. Verwenden Sie in der Klasse 'hide' integrierte Bootstraps, um die Anzeige effektiv festzulegen: keine für das div-Element:
<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0"> <a class="close" href="#">×</a> <p><strong>Well done!</strong> You successfully read this alert message.</p> </div>
und verwenden Sie dann die Funktion fadeIn in jquery wie folgt:
$("#saveAlert").fadeIn();
Es gibt auch eine Dauer für die FadeIn-Funktion, z. B.: $ ("# SaveAlert"). FadeIn (400);
Ausführliche Informationen zur Verwendung der FadeIn-Funktion finden Sie auf der offiziellen jQuery-Dokumentationsseite: http://api.jquery.com/fadeIn/
Nur eine Randnotiz: Wenn Sie jquery nicht verwenden, können Sie entweder die Klasse 'hide' zu Ihrer eigenen CSS-Datei hinzufügen oder diese einfach zu Ihrem div hinzufügen:
<div style="display:none;" id="saveAlert">
Ihr div wird dann grundsätzlich standardmäßig ausgeblendet, und dann führt jQuery die FadeIn-Aktion aus, wodurch das div angezeigt wird.
quelle
Für 2.3 und höher fügen Sie einfach hinzu:
$(".alert").fadeOut(3000 );
Bootstrap:
<div class="alert success fade in" data-alert="alert" > <a class="close" data-dismiss="alert" href="#">×</a> // code </div>
Funktioniert in allen Browsern.
quelle
hide
Klasse hinzufügen zualert-message
. Fügen Sie nach dem Import Ihres jQuery-Skripts den folgenden Code ein:$(document).ready( function(){ $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'}); window.setTimeout( function(){ $(".alert-message").slideUp(); }, 2500); });
Wenn Sie mehrere Nachrichten verarbeiten möchten, werden diese durch diesen Code in aufsteigender Reihenfolge ausgeblendet:
$(document).ready( function(){ var hide_delay = 2500; // starting timeout before first message is hidden var hide_next = 800; // time in mS to wait before hiding next message $(".alert-message").slideDown().each( function(index,el) { window.setTimeout( function(){ $(el).slideUp(); // hide the message }, hide_delay + hide_next*index); }); });
quelle
Keine der aktuellen Antworten hat bei mir funktioniert. Ich benutze Bootstrap 3.
Ich mochte, was Rob Vermeer tat, und ging von seiner Antwort aus.
Für einen Ein- und Ausblendeffekt habe ich gerade die folgende Funktion geschrieben und jQuery verwendet:
HTML auf meiner Seite, um die Warnung (en) hinzuzufügen zu:
<div class="alert-messages text-center"> </div>
Javascript-Funktion zum Anzeigen und Schließen der Warnung.
function showAndDismissAlert(type, message) { var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>'; // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top. $(".alert-messages").prepend(htmlAlert); // Since we are prepending, take the first alert and tell it to fade in and then fade out. // Note: if we were appending, then should use last() instead of first() $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); }); }
Um die Warnung anzuzeigen und zu schließen, rufen Sie einfach die folgende Funktion auf:
showAndDismissAlert('success', 'Saved Successfully!'); showAndDismissAlert('danger', 'Error Encountered'); showAndDismissAlert('info', 'Message Received');
Als Randnotiz habe ich die oben fixierten div.alert-Nachrichten gestylt:
<style> div.alert-messages { position: fixed; top: 50px; left: 25%; right: 25%; z-index: 7000; } </style>
quelle
Ich bin nicht mit der Art und Weise einverstanden , dass Bootstrap Nutzungen
fade in
(wie in ihrer Dokumentation gesehen - http://v4-alpha.getbootstrap.com/components/alerts/ ), und mein Vorschlag ist , die Klassennamen zu vermeiden ,fade
undin
, und zu vermeiden dieses Muster im Allgemeinen (das derzeit in der am besten bewerteten Antwort auf diese Frage zu sehen ist).(1) Die Semantik ist falsch - Übergänge sind vorübergehend, aber die Klassennamen leben weiter. Warum sollten wir also unsere Klassen benennen
fade
undfade in
? Es solltefaded
und seinfaded-in
, damit, wenn Entwickler das Markup lesen, klar ist, dass diese Elementefaded
oder warenfaded-in
. Das Bootstrap - Team hat bereits mit abgetanhide
fürhidden
, warum istfade
anders?(2) Die Verwendung von 2 Klassen
fade
undin
für einen einzelnen Übergang verschmutzt den Klassenraum. Und es ist nicht klar, dassfade
undin
miteinander verbunden sind. Diein
Klasse sieht aus wie eine völlig unabhängige Klasse, wiealert
undalert-success
.Die beste Lösung besteht darin, zu verwenden,
faded
wenn das Element ausgeblendet wurde, und diese Klasse durch zu ersetzen,faded-in
wenn das Element ausgeblendet wurde.Alarm verblasst
Also um die Frage zu beantworten. Ich denke, das Alert-Markup, der Stil und die Logik sollten folgendermaßen geschrieben werden. Hinweis: Wenn Sie Vanille-Javascript verwenden, können Sie die jQuery-Logik ersetzen .
HTML
<div id="saveAlert" class="alert alert-success"> <a class="close" href="#">×</a> <p><strong>Well done!</strong> You successfully read this alert message.</p> </div>
CSS
.faded { opacity: 0; transition: opacity 1s; }
JQuery
$('#saveAlert .close').on('click', function () { $("#saveAlert") .addClass('faded'); });
quelle
Natürlich ja. Verwenden Sie diese einfache Datei in Ihrem Projekt: https://gist.github.com/3851727
Fügen Sie zuerst HTML wie folgt hinzu:
<div id="messagebox" class="alert hide"></div>
und dann benutze:
$("#messagebox").message({text: "Hello world!", type: "error"});
Sie können alle Bootstrap - Alert - Typen übergeben, wie
error
,success
undwarning
auftype
Eigenschaft als Optionen.quelle
Auf diese Weise konnte ich meinen Alarm nach 3 Sekunden schließen. Hoffe es wird nützlich sein.
setTimeout(function(){ $('.alert').fadeTo("slow", 0.1, function(){ $('.alert').alert('close') }); }, 3000)
quelle
Dies ist eine sehr wichtige Frage, und ich hatte Mühe, die Nachricht durch Ersetzen der aktuellen und Hinzufügen einer neuen Nachricht zu erledigen (ein- / ausblenden).
Unten ist ein Arbeitsbeispiel:
function showAndDismissAlert(type, message) { var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>'; $(".alert-messages").prepend(htmlAlert); $(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() { $(this).remove(); }); }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="alert-messages"></div> <div class="buttons"> <button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button> <button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button> <button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button> </div>
Hoffe es wird anderen helfen!
quelle