CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
executable
executable

Reputation: 3590

Bootstrap 3 close current modal open new modal

I'm trying to close the current modal and open a new modal, I'm able to acheive it, but when the second modal is open I get the scroll bar. The .modal-open is missing from the body element.

Here is my snippet : 

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
  
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-1">
      Launch Modal 1
    </button>  
    <div class="modal fade" id="modal-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>Modal 1</p>
            <a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next ></a>     
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->  
 
    <!-- #modal 2 -->
    <div class="modal fade" id="modal-2">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>Modal 2</p>      
            <a href="#modal-1" data-toggle="modal" data-dismiss="modal">Previous</a>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->  
    <div style="height: 1000px;"></div>
  </body>
</html>

Upvotes: 1

Views: 47

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Bootstrap applies a class modal-open on body when it opens a modal. On close of modal it removes that class (lets say after approx 500ms). So when we try to close one modal and open another another modal at the same time, one code is removing the modal-open class and one code applies the modal-open class. Due to this, the modal-open class gets removed from the body and we are able to see the scrollbar.

To fix this its advisable to trigger the opening of 2nd modal through javascript after a setTimeout of 500ms. This will ensure that the 2nd modal will open only after the first is closed completely.

$('#next_modal').click(() => {
  setTimeout(() => {
    $('#modal-2').modal('toggle'); //href="#modal-2" data-toggle="modal" 
  }, 500)

})
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-1">
      Launch Modal 1
    </button>
  <div class="modal fade" id="modal-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Modal 1</p>
          <a id="next_modal" data-dismiss="modal">Next ></a>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->

  <!-- #modal 2 -->
  <div class="modal fade" id="modal-2">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Modal 2</p>
          <a href="#modal-1" data-toggle="modal" data-dismiss="modal">Previous</a>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
  <div style="height: 1000px;"></div>
</body>

</html>

Upvotes: 1

Related Questions