wake-up-neo.net

Twitter Bootstrap-Warnmeldung wird geschlossen und wieder geöffnet

Ich habe ein Problem mit Warnmeldungen. Es wird normalerweise angezeigt und ich kann es schließen, wenn der Benutzer x (close) drückt, aber wenn der Benutzer versucht, es erneut anzuzeigen (z. B. auf das Schaltflächenereignis), wird es nicht angezeigt. (Außerdem, wenn ich diese Warnmeldung an die Konsole drucke, ist sie gleich [].) Mein Code ist hier:

 <div class="alert" style="display: none">
   <a class="close" data-dismiss="alert">×</a>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>

Und Veranstaltung:

 $(".alert").show();

P.S! Ich muss eine Warnmeldung nur anzeigen, nachdem ein Ereignis aufgetreten ist (z. B. Klicken auf die Schaltfläche). Oder was mache ich falsch?

92
user721588

Durch das Entfernen von Daten wird das Element vollständig entfernt. Verwenden Sie stattdessen die .hide () - Methode von jQuery.

Die schnelle 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 keine gute Sache ist, wenn Sie eine wartbare App möchten).

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 data-demiss in data-hide im Markup. Beispiel bei jsfiddle .

$("." + $(this).attr("data-hide")).hide()

Dadurch werden alle Elemente mit der in data-hide angegebenen Klasse ausgeblendet, d. H .: data-hide="alert" blendet alle Elemente mit der Alert-Klasse aus.

Xeon06 bot eine alternative Lösung an:

$(this).closest("." + $(this).attr("data-hide")).hide()

Dadurch wird nur das nächstgelegene übergeordnete Element ausgeblendet. Dies ist sehr nützlich, wenn Sie nicht jedem Alarm eine eindeutige Klasse zuweisen möchten. Bitte beachten Sie, dass Sie jedoch die Schließen-Schaltfläche innerhalb der Warnung platzieren müssen.

Definition von .closest aus jquery doc :

Rufen Sie für jedes Element in der Gruppe das erste Element ab, das mit dem Selektor übereinstimmt, indem Sie das Element selbst testen und durch seine Vorfahren in der DOM-Struktur navigieren.

165
Henrik Karlsson

Ich habe nur eine Modellvariable verwendet, um den Dialog anzuzeigen/auszublenden, und entfernte den data-dismiss="alert"

Beispiel:

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

arbeitet für mich und hört auf, zu jquery zu gehen

26
user1661621

Ich denke, ein guter Ansatz für dieses Problem wäre, den Ereignistyp close.bs.alert 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.

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});
6
kimbaudi

Wenn Sie eine MVVM-Bibliothek wie knockout.js (die ich sehr empfehle) verwenden, können Sie dies sauberer machen:

<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
   <button type="button" class="close" data-bind="click:function(){showAlert(false);}>
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
   </button>
   Warning! Better check yourself, you're not looking too good.
</div>

http://jsfiddle.net/bce9gsav/5/

5
Ohad Schneider

Wenn Sie also eine Lösung wünschen, die mit dynamischen HTML-Seiten umgehen kann, sollten Sie, da Sie sie bereits enthalten, jQuery Live verwenden, um den Handler für alle Elemente festzulegen, die sich jetzt und in Zukunft im Dom befinden, oder entfernt werden.

Ich benutze

$(document).on("click", "[data-hide-closest]", function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.closest($this.attr("data-hide-closest")).hide();
});
.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}
.close {
    color: #000;
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    text-shadow: 0 1px 0 #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
  <a class="close" data-hide-closest=".alert">×</a>
  <strong>Success!</strong> Your entries were saved.
</div>

2
Joschi

Ich stimme der Antwort von Henrik Karlsson zu, die von Martin Prikryl bearbeitet wurde. Ich habe einen Vorschlag, der sich auf die Zugänglichkeit bezieht. Ich würde .attr ("aria-hidden", "true") am Ende hinzufügen, so dass es so aussieht:

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");
1
cfnerd

Ich bin auch auf dieses Problem gestoßen und das Problem mit dem einfachen Hacken des close-Buttons ist, dass ich immer noch Zugriff auf die standardmäßigen Bootstrap-Alarmereignisse haben muss.

Meine Lösung bestand darin, ein kleines, anpassbares Jquery-Plugin zu schreiben, das mit einem Minimum an Aufwand einen ordnungsgemäß geformten Bootstrap 3-Alarm (mit oder ohne Schließen, je nach Bedarf) injiziert und es Ihnen ermöglicht, ihn nach der Box leicht zu regenerieren ist geschlossen.

Informationen zur Verwendung, Tests und Beispielen finden Sie unter https://github.com/davesag/jquery-bs3Alert .

1
Dave Sag

Alle oben genannten Lösungen verwenden externe Bibliotheken, entweder angular oder jQuery, und eine alte Version von Bootstrap. Hier ist also Charles Wyke-Smiths Lösung in reines JavaScript, angewendet auf Bootstrap 4. Ja, Bootstrap benötigt jQuery für seinen eigenen Modal- und Alert-Code, aber nicht mehr jeder schreibt seinen eigenen Code mit jQuery.

Hier ist der HTML-Code der Warnung:

<div id="myAlert" style="display: none;" 
    class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-hide="alert">&times;</button>
    <strong>Success!</strong> You did it!
</div>

Beachten Sie, dass die Warnung anfangs ausgeblendet ist (style="display: none;") und statt des Standards data-dismiss="alert" hier data-hide="alert" verwendet wurde.

Hier ist das JavaScript, um die Warnung anzuzeigen und die Schaltfläche zum Schließen zu überschreiben:

var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap's standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
    myAlert.style.display = 'none';
});

Wenn Sie die Warnung an einer anderen Stelle im Code programmgesteuert ein- oder ausblenden möchten, führen Sie einfach myAlert.style.display = 'none'; oder myAlert.style.display = 'block'; aus.

0
Jaifroid

Hier ist eine Lösung basierend auf der Antwort von Henrik Karlsson aber mit der richtigen event Auslösung (basierend auf Bootstrap-Quellen ):

$(function(){
    $('[data-hide]').on('click', function ___alert_hide(e) {
        var $this = $(this)
        var selector = $this.attr('data-target')
        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector === '#' ? [] : selector)

        if (!$parent.length) {
            $parent = $this.closest('.alert')
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.hide()

        $parent.trigger($.Event('closed.bs.alert'))
    })
});

Die Antwort meistens für mich als Notiz.

0
maxkoryukov

Ich habe alle Methoden ausprobiert und der beste Weg für mich ist die Verwendung der integrierten Bootstrap-Klassen .fade und .in

Beispiel:

<div class="alert alert-danger fade <?php echo ($show) ? 'in' : '' ?>" role="alert">...</div>

Hinweis: In jQuery addClass ('in') zum Anzeigen der Warnung, removeClass ('in') zum Ausblenden.

Fun fact: Dies funktioniert für alle Elemente. Nicht nur Warnungen.

0
clodal

Das Problem wird durch die Verwendung von style="display:none" verursacht. Sie sollten alert mit Javascript ausblenden oder zumindest das style-Attribut entfernen.

0
Plamen Nikolov

Basierend auf den anderen Antworten und dem Ändern der Löschung der Daten in das Verbergen von Daten behandelt dieses Beispiel das Öffnen der Warnung über einen Link und ermöglicht das wiederholte Öffnen und Schließen der Warnung

$('a.show_alert').click(function() {
    var $theAlert = $('.my_alert'); /* class on the alert */
    $theAlert.css('display','block');
   // set up the close event when the alert opens
   $theAlert.find('a[data-hide]').click(function() {
     $(this).parent().hide(); /* hide the alert */
   });
});
0