how to check if bootstrap-4 modal already open?

Question

I want to check if a certain modal is already open , I have tried this methods (bootstrap-4) but didn't work for me (always give 'false' even if the dialog is open)

 $('#myModal').is(':visible');   
 $('#myModal').data('bs.modal').isShown ;        
 $('#myModal').hasClass('in');

I checked modal classList , no any new class added to my modal after it became visible to the screen

I don't want event handlers as I don't want to track the status , I just want to check if the dialog was previously open via some other function

score 8 · Accepted Answer · answered Oct 29 '17 at 09:16

when a bootstrap modal (v4) is shown, as far as i can notice, three things happens in the DOM, the modal gets a two classes named fade and show respectively, and a style property with display to block (and mybe others like padding...) and the body tag gets a class named modal-open. So realy all you have to do is to check for one of those things, i recommend to check the existing of the show class.

$('#exampleModal').hasClass('show'); // return true if the modal is open

or

$('body').hasClass('modal-open');

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Bootstrap modal</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </head>
    <body>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
      <script>
      
           $('#myModal').modal('show');
           
           setTimeout(function() {
              
              var isShown = $('#myModal').hasClass('show');
              console.log(isShown);
              
           }, 1000);
      
      </script>
    </body>
</html>

when the dialog launched at the first time there is no any additional classes added — Sara, Oct 29 '17 at 09:53
setTimeout worked (Y) , but is there another solution without depending on this value of timeout (i.e: 1000ms) — Sara, Oct 29 '17 at 10:02
@Sara i think this may depend on how/when your script is executed. — chebaby, Oct 29 '17 at 11:56
it is the standard modal code from bootstrap examples without any change @chebaby — Sara, Nov 06 '17 at 09:56
@Sara i'm little bit lost here... bootstrap examples works just fine!! i think what you may be asking for are modal events!! https://v4-alpha.getbootstrap.com/components/modal/#events — chebaby, Nov 06 '17 at 15:59

score 5 · Answer 2 · answered Oct 29 '17 at 08:18

5

Your modal will have the class .show if the modal has been shown via Bootstrap JS and so if you would like to see if the modal is currently open, you can check $('#myModal').hasClass('show').

answered Oct 29 '17 at 08:18

Callam

11,409
2
34
32

also returned false when the dialog open – Sara Oct 29 '17 at 08:51
What do you get when inspecting `$('#myModal')`? Please show us the result – Callam Oct 29 '17 at 08:52
i checked modal classList , no any new class added to my modal after it became visible to the screen – Sara Oct 29 '17 at 08:53
it returns only a plain text – Sara Oct 29 '17 at 08:55
What is this plain text? Are you entering just `$('#myModal')` on its own? – Callam Oct 29 '17 at 08:56
$('#myModal').modal(); $('#myModal .modal-body').html('test'); – Sara Oct 29 '17 at 08:59

how to check if bootstrap-4 modal already open?

2 Answers2

Linked