Can I check if Bootstrap Modal Shown / Hidden?

Question

Can I check if Bootstrap Modal currently Shown / Hidden Programatically?

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

I need true/false

Answer 1

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

It will return true if modal is open

Answer 2

The best method is given in the docs

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

for more info refer http://getbootstrap.com/javascript/#modals

Answer 3

its an old question but anyway heres something i used incase someone was looking for the same thing

if (!$('#myModal').is(':visible')) {
    // if modal is not shown/visible then do something
}

Answer 4

All Bootstrap versions:

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

To just close it independent of state and version:

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

---

more info

Bootstrap 3 and before

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

Bootstrap 4

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

Answer 5

When modal hide? we check like this :

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

Answer 6

Use hasClass('in'). It will return true if modal is in OPEN state.

E.g:

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

Answer 7

In offical way:

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

{} is used to avoid the case that modal is not opened yet (it return undefined). You can also assign it equal {isShown: false} to keep it's more make sense.

Answer 8

Here's some custom code that gives the modal states more explicitly named classes:

$('.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");
});

You can then easily target the modal's various states with both JS and CSS.

JS example:

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

CSS example:

.modal-fading-out, .modal-hidden
{
    opacity: 0.5;
}

Answer 9

With Bootstrap 4:

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

Answer 10

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

Answer 11

For me this works

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


alert("modal shown");

Answer 12

I try like this with function then calling if needed a this function. Has been worked for me.

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

Answer 13

This resolved your problems, if true no refresh, and false refresh

var truFalse = $('body').hasClass('modal-open');