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

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

Wie bool a = if("#myModal").shown();?

Ich brauche wahr / falsch

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

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

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

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
}

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

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

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')

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

Z.B:

if($('.modal').hasClass('in')){
   //Do something here
}

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.

Mit Bootstrap 4:

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

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;
}

if($('.modal').hasClass('in')) {
    alert($('.modal .in').attr('id')); //ID of the opened modal
} else {
    alert("No pop-up opened");
}

Bei mir funktioniert das

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


alert("modal shown");

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");
});
}