Bootstrap(2.3.2) modal popup visibility check

Question

I need to insert a class name to body tag when the bootstrap pop up is opened. I have tried adding using jquery but unfortunately it is not working. Any help would be appreciated.

Here is my code

if(!$('.modal-backdrop').is(':visible'))
{
$(body).addClass("test");
}

Demo

http://stackoverflow.com/questions/19674701/can-i-check-if-bootstrap-modal-shown-hidden — Renjith V R, Jun 13 '16 at 11:18
Possible duplicate of [How to check if bootstrap modal is open, so i can use jquery validate](http://stackoverflow.com/questions/19506672/how-to-check-if-bootstrap-modal-is-open-so-i-can-use-jquery-validate) — Renjith V R, Jun 13 '16 at 11:20

rajeev · Accepted Answer · 2016-06-14T12:19:43.960

1

$('.modal-backdrop').on('shown', function() {
        $('body').addClass("test");
    });

    $('.modal-backdrop').on('hidden', function () {
    $('body').removeClass("test");
})

edited Jun 14 '16 at 12:19

answered Jun 13 '16 at 11:14

rajeev

115
8

I personally use this method myself, can be an issue if the modal is faded in and the user is a fast clicker but I find it works alright. – bolt19 Jun 13 '16 at 11:19
if($('.modal-backdrop').hasClass('in')){ $('body').addClass("test"); } – rajeev Jun 13 '16 at 11:46
But it is not removing the `test` class from body when pop up is closed – Jun 14 '16 at 12:10

score 0 · Answer 2 · answered Jun 13 '16 at 11:12

0

You can do it with 'shown' bootstrap event, like so:

$('.modal-backdrop').on('shown', function() {
    $('body').addClass("test");
});

answered Jun 13 '16 at 11:12

GONG

3,976
1
24
27

score 0 · Answer 3 · answered Jun 13 '16 at 11:14

0

it seems in your demo the $('#myModal1 .selectpicker').selectpicker(); is causing some problem.

But you could use this code from http://getbootstrap.com/javascript/#modals docs

$('#myModal1').on('shown.bs.modal', function () {
 $('body').addClass("test");
});

http://jsfiddle.net/h3WDq/1410/

Please check via console log if class is added.

answered Jun 13 '16 at 11:14

Nique Joe

492
5
18

In my case I am not using id names so need to get it done by class names. – Jun 14 '16 at 05:38
Then you can just change the id to class it will still work. do you have many modals with the same class? – Nique Joe Jun 14 '16 at 05:42
Yes I have multiple pop ups with different class names so can't specify a tag class and write script for tat, tat is why I need to check with the overlay class which is `.modal-backdrop` – Jun 14 '16 at 06:56
how about this? http://jsfiddle.net/h3WDq/1410/ since every modal has a .modal class. – Nique Joe Jun 14 '16 at 08:05
But in my real page I do not have ids so can not refer` #mymodal` – Jun 14 '16 at 10:34

score 0 · Answer 4 · answered Jun 13 '16 at 11:15

0

You can use

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

answered Jun 13 '16 at 11:15

Kroonal

350
2
7

score 0 · Answer 5 · answered Jun 13 '16 at 11:16

0

plz use bootstrap modal events for this: http://getbootstrap.com/javascript/#js-events

you can use this: $('#myModal').on('show.bs.modal', function (e){}) http://jsfiddle.net/h3WDq/1408/

answered Jun 13 '16 at 11:16

Aswin Ramesh

1,654
1
13
13

Bootstrap(2.3.2) modal popup visibility check

5 Answers5