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

possible duplicate of [jQuery if statement to check visibility](http://stackoverflow.com/questions/8616020/jquery-if-statement-to-check-visibility) — Phil, Oct 30 '13 at 05:46

score 146 · Accepted Answer · edited Aug 25 '17 at 12:13

146

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

It will return true if modal is open

edited Aug 25 '17 at 12:13

PEHLAJ

9,980
9
41
53

answered Oct 30 '13 at 05:46

2

if($('#myModal').hasClass('in')){/*do something*/} best usage. thanks – MERT DOĞAN Oct 23 '14 at 16:22
27

for me `$('#myModal').hasClass('show')` works, **Bootstrap V4** – Reza Afzalan May 25 '17 at 20:26
@Samad it doesn'T work with Bootstrap 4, it does with 3 though. reza's answer works with 4, it does not work with 3... – estani Nov 01 '19 at 16:09
1

@estani Try `if($('.modal.in, .modal.show').length)` for **Bootstrap V2, 3, 4+** – Nov 04 '19 at 11:27

score 32 · Answer 2 · answered Oct 30 '13 at 07:42

32

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

answered Oct 30 '13 at 07:42

vipulsharma

1,242
1
8
16

Sure, that's the best method for executing a function when the modal appears, but that's different from checking if it's currently shown or hidden, as OP asked. My use-case, for example, is to perform an action on keypress, but only if a certain class of modal is visible. I don't see how this method can be used for that. – DHW Apr 05 '20 at 15:22
@DHW Couldn't you keep track of whether it's open or closed with those methods? If shown -> store that it's shown, when hidden -> store that it's hidden. Then you can just reference the relevant variables. – Anther May 19 '20 at 20:43

score 25 · Answer 3 · answered Feb 11 '15 at 12:38

25

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
}

answered Feb 11 '15 at 12:38

ctf0

6,991
5
37
46

1

This just reads so nicely. Also not dependent on specific class selectors which could prove fragile. – Mike Rapadas May 07 '15 at 22:37
5

However, I believe it could return a false positive if it's executed during the showing/hiding animation. – Dinei Aug 19 '15 at 20:42
maybe but even though the function waits till the animation is finished to check if its visible or hidden as this one works the same as using normal css. – ctf0 Sep 17 '15 at 21:51

estani · Answer 4 · 2020-05-15T11:32:54.380

9

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

edited May 15 '20 at 11:32

answered Nov 01 '19 at 16:24

estani

24,254
2
93
76

score 7 · Answer 5 · answered Jan 23 '15 at 05:51

7

When modal hide? we check like this :

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

answered Jan 23 '15 at 05:51

Kamlesh Kumar

1,632
2
21
31

score 3 · Answer 6 · answered Aug 09 '17 at 10:25

3

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

E.g:

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

answered Aug 09 '17 at 10:25

PEHLAJ

9,980
9
41
53

Sakata Gintoki · Answer 7 · 2018-01-15T06:09:47.140

3

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.

edited Jan 15 '18 at 06:09

answered Jan 15 '18 at 04:52

Sakata Gintoki

1,817
16
23

this is what I was after, it already returns `true` while the modal is opening, but before the `shown` class is applied – kiw Jan 26 '19 at 19:08

Pikamander2 · Answer 8 · 2021-12-03T18:29:06.387

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

score 2 · Answer 9 · answered Mar 10 '19 at 15:30

2

With Bootstrap 4:

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

answered Mar 10 '19 at 15:30

NaturalBornCamper

3,675
5
39
58

score 1 · Answer 10 · answered Aug 09 '17 at 09:48

1

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

answered Aug 09 '17 at 09:48

Jaykishan

1,409
1
15
26

score 1 · Answer 11 · edited Jun 21 '19 at 03:24

1

For me this works

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

alert("modal shown");

edited Jun 21 '19 at 03:24

mars328

573
2
8
26

answered May 25 '18 at 10:20

Mónica Cifuentes

11
1

score 0 · Answer 12 · answered Dec 31 '20 at 16:31

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

score -1 · Answer 13 · edited Dec 14 '21 at 22:09

-1

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

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

edited Dec 14 '21 at 22:09

Elikill58

4,050
24
23
45

answered Dec 14 '21 at 21:44

Noe Garcia

11
2

Can I check if Bootstrap Modal Shown / Hidden?

13 Answers13

more info

Linked

Related