Können Twitter Bootstrap-Warnungen sowohl ein- als auch ausgeblendet werden?

78

Als ich die Warnungen in Bootstrap zum ersten Mal sah, dachte ich, sie würden sich wie das modale Fenster verhalten, herunterfallen oder einblenden und dann beim Schließen ausblenden. Aber es scheint, als wären sie immer sichtbar. Ich denke, ich könnte sie in einer Ebene über meiner App sitzen lassen und sie anzeigen, aber ich habe mich gefragt, ob die Funktionalität integriert ist.

Vielen Dank!

Edit, was ich bisher habe:

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
jquery  css  alerts  twitter-bootstrap 
— Kreek
quelle

Antworten:

141

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">
  <!-- rest of alert code goes here -->
</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/

— DivZero
quelle
Internet Explorer unterstützt die Übergangseigenschaft nicht und IE8 und darunter unterstützen keine Deckkraft. Sie müssen die Filtereigenschaft verwenden. Wenn Sie diesen Ansatz verwenden möchten, wird eine ordnungsgemäße Verschlechterung empfohlen.
— Teuer
17
Nun, es verschlechtert sich dankbar. Nämlich indem man nicht ein- oder ausblendet. Wenn Sie das Ausbleichen wirklich brauchen, ist der Bootstrap-Ansatz nichts für Sie. Wenn es Ihrem Design nur zusätzlichen Glanz verleiht und Sie eine zukunfts- und mobilsichere Website wünschen, tun Sie Folgendes: Belohnen Sie Benutzer mit modernen Browsern mit hübschen Animationen und lassen Sie diese für diejenigen weg, die dies nicht tun. Anstatt ihnen möglicherweise abgehackte / verzögerte Animationen zu geben, weil sie veraltete Hardware / Software verwenden.
— DivZero
1
Ich habe unten eine alternative Antwort gepostet. Ich bin mir zwar einig, dass diese Antwort für die Leistung am besten ist, aber ich denke, sie verschmutzt das Markup. Es ist nicht klar, dass die Klassen fadeund zugeordnet insind. Wie im Markup zu sehen class="alert alert-success fade in". Die inKlasse sieht aus wie eine völlig unabhängige Klasse, wie alertoder alert-success. Es wäre besser, den Klassennamen zu verwenden faded-in(und fadesollte es auch sein faded), der Übergang ist vorübergehend, aber der Klassenname lebt weiter.
— Montag,
Damit dies in Bootstrap 4 funktioniert, verwenden Sie die "show"Klasse anstelle von"in"
— DigitalDan
28

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!');
— Rob Vermeer
quelle
18

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.

— Kreek
quelle
8
Dadurch wird die Warnmeldung für mich nicht ausgeblendet, sondern nur angezeigt.
— Dmackerman
2
Dies wird ab Bootstrap 3 nicht mehr funktionieren - siehe github.com/twbs/bootstrap/pull/6342 unter Verschiedenes
— Carl
9

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="#">&times;</a>
    // code 
</div>

Funktioniert in allen Browsern.

— pri
quelle
Elegant und einfach, danke. Ich mag die Tatsache, dass es nicht nötig ist, js zu schreiben. Gibt es eine Möglichkeit, das Fade-Verhalten zu ändern, z. B. das Fading zu verlängern?
— Carlos Mora
6

hideKlasse hinzufügen zu alert-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);
   });
});
— cmcginty
quelle
4

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>
— Chris
quelle
2

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 , fadeund in, 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 fadeund fade in? Es sollte fadedund sein faded-in, damit, wenn Entwickler das Markup lesen, klar ist, dass diese Elemente fadedoder waren faded-in. Das Bootstrap - Team hat bereits mit abgetan hidefür hidden, warum ist fadeanders?

(2) Die Verwendung von 2 Klassen fadeund infür einen einzelnen Übergang verschmutzt den Klassenraum. Und es ist nicht klar, dass fadeund inmiteinander verbunden sind. Die inKlasse sieht aus wie eine völlig unabhängige Klasse, wie alertund alert-success.

Die beste Lösung besteht darin, zu verwenden, fadedwenn das Element ausgeblendet wurde, und diese Klasse durch zu ersetzen, faded-inwenn 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');

});
— tfmontague
quelle
1

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, successund warningauf typeEigenschaft als Optionen.

— Afshin Mehrabani
quelle
1

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)
— wicardoso
quelle
0

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>
Erweitern Sie das Snippet

Hoffe es wird anderen helfen!

— Vikasdeep Singh
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.