Kann ich überprüfen, ob Bootstrap Modal angezeigt / ausgeblendet wird?

Antworten:

136 
alert($('#myModal').hasClass('in'));

Es wird true zurückgegeben, wenn modal geöffnet ist

Pehlaj - Entwickler mobiler Apps
quelle
2
if ($ ('# myModal'). hasClass ('in')) {/ * mach etwas * /} am besten. danke
MERT DOĞAN
22
für mich $('#myModal').hasClass('show')funktioniert Bootstrap V4
Reza Afzalan
@ Samad es funktioniert nicht mit Bootstrap 4, aber es funktioniert mit 3. Rezas Antwort funktioniert mit 4, es funktioniert nicht mit 3 ...
estani
1
@estani Versuchen Sie if($('.modal.in, .modal.show').length)für Bootstrap V2, 3, 4+
29

Die beste Methode finden Sie in den Dokumenten 

$('#myModal').on('shown.bs.modal', function () {
  // will only come inside after the modal is shown
});

Weitere Informationen finden Sie unter http://getbootstrap.com/javascript/#modals

Vipulsharma
quelle
Sicher, das ist die beste Methode, um eine Funktion auszuführen, wenn das Modal angezeigt wird, aber das unterscheidet sich von der Überprüfung, ob es aktuell angezeigt oder ausgeblendet wird, wie OP gefragt hat. Mein Anwendungsfall besteht beispielsweise darin, eine Aktion beim Tastendruck auszuführen, jedoch nur, wenn eine bestimmte Modalklasse sichtbar ist. Ich sehe nicht, wie diese Methode dafür verwendet werden kann.
Warmwasser
@DHW Könnten Sie nicht verfolgen, ob es mit diesen Methoden offen oder geschlossen ist? Wenn angezeigt -> speichern, dass es angezeigt wird, wenn versteckt -> speichern, dass es versteckt ist. Dann können Sie einfach auf die relevanten Variablen verweisen.
Anther
22

Es ist eine alte Frage, aber trotzdem ist hier etwas, das ich benutzt habe, falls jemand nach dem gleichen Ding gesucht hat

if (!$('#myModal').is(':visible')) {
    // if modal is not shown/visible then do something
}
ctf0
quelle
1
Das liest sich einfach so gut. Auch nicht abhängig von bestimmten Klassenselektoren, die sich als fragil erweisen könnten.
Mike Rapadas
4
Ich glaube jedoch, dass es ein falsches Positiv zurückgeben könnte, wenn es während des Ein- / Ausblendens der Animation ausgeführt wird.
Dinei
Vielleicht, aber obwohl die Funktion wartet, bis die Animation fertig ist, um zu überprüfen, ob sie sichtbar oder ausgeblendet ist, funktioniert diese genauso wie die Verwendung von normalem CSS.
CTF0
7

Wann modal verstecken? wir überprüfen wie folgt:

$('.yourmodal').on('hidden.bs.modal', function () {
    // do something here
})
Kamlesh
quelle
5

Alle Bootstrap-Versionen:

var isShown = $('.modal').hasClass('in') || $('.modal').hasClass('show')

So schließen Sie es einfach unabhängig von Status und Version:

$('.modal button.close').click()

Mehr Info

Bootstrap 3 und früher

var isShown = $('.modal').hasClass('in')

Bootstrap 4

var isShown = $('.modal').hasClass('show')
estani
quelle
3

Verwenden Sie hasClass('in'). Es wird true zurückgegeben, wenn sich modal im OPENStatus befindet.

Z.B:

if($('.modal').hasClass('in')){
   //Do something here
}
Pehlaj - Entwickler mobiler Apps
quelle
3

In offizieller Weise:

> ($("element").data('bs.modal') || {})._isShown    // Bootstrap 4
> ($("element").data('bs.modal') || {}).isShown     // Bootstrap <= 3

{}wird verwendet, um den Fall zu vermeiden, dass Modal noch nicht geöffnet ist (es kehrt zurück undefined). Sie können es auch gleich zuweisen, damit {isShown: false}es sinnvoller bleibt.

Sakata Gintoki
quelle
Dies ist, was ich danach war, es kehrt bereits zurück, truewährend das Modal geöffnet wird, aber bevor die shownKlasse angewendet wird
Kiw
2

Mit Bootstrap 4:

if ($('#myModal').hasClass('show')) {
    alert("Modal is visible")
}
NaturalBornCamper
quelle
2

Hier ist ein benutzerdefinierter Modalcode, der den Modalzuständen explizit benannte Klassen gibt:

$('.modal').on('show.bs.modal', function(e)
{
    e.currentTarget.classList.add("modal-fading-in");
    e.currentTarget.classList.remove("modal-fading-out");
    e.currentTarget.classList.remove("modal-hidden");
    e.currentTarget.classList.remove("modal-visible");
});

$('.modal').on('hide.bs.modal', function(e)
{
    e.currentTarget.classList.add("modal-fading-out");
    e.currentTarget.classList.remove("modal-fading-in");
    e.currentTarget.classList.remove("modal-hidden");
    e.currentTarget.classList.remove("modal-visible");
});

$('.modal').on('hidden.bs.modal', function(e)
{
    e.currentTarget.classList.add("modal-hidden");
    e.currentTarget.classList.remove("modal-fading-in");
    e.currentTarget.classList.remove("modal-fading-out");
    e.currentTarget.classList.remove("modal-visible");
});

$('.modal').on('shown.bs.modal', function(e)
{
    e.currentTarget.classList.add("modal-visible");
    e.currentTarget.classList.remove("modal-fading-in");
    e.currentTarget.classList.remove("modal-fading-out");
    e.currentTarget.classList.remove("modal-hidden");
});

Sie können dann problemlos mit JS und CSS auf die verschiedenen Zustände des Modals abzielen.

JS Beispiel:

if (document.getElementById('myModal').hasClass('modal-fading-in'))
{
    console.log("The modal is currently fading in. Please wait.");
}

CSS-Beispiel:

.modal-fading-out, .modal-hidden
{
    opacity: 0.5;
}
Pikamander2
quelle
1 
if($('.modal').hasClass('in')) {
    alert($('.modal .in').attr('id')); //ID of the opened modal
} else {
    alert("No pop-up opened");
}
Jaykishan
quelle
1

Bei mir funktioniert das

 
if ($ ( "#myModal" ) .css ( "display" )! = 'none' && $ ( "#myModal" ) .css ( "sichtbarkeit" )! = 'hidden' )


alert("modal shown");

Mónica Cifuentes
quelle
0

Ich versuche so mit der Funktion und rufe dann bei Bedarf diese Funktion auf. Wurde für mich gearbeitet.

function modal_fix() {
var a = $(".modal"),
    b = $("body");
a.on("shown.bs.modal", function () {
    b.hasClass("modal-open") || b.addClass("modal-open");
});
}
Adhitya
quelle