Scrolling effect is not working when creating a modal from another modal

Question

In my angular app, using bootstrap I have created a modal inside another modal. First, you will see the button for loading the first modal. Now you can see the scrolling effect. But if load the 2nd modal and close it, then the scrolling effect for the first modal is not working anymore. How can I fix that problem? See the example here

Here is the code sample, you can also see the above link:

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Click Me</a>

<div class="modal" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal title</h4>    
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div><div class="container"></div>
        <div class="modal-body">
          Scrollin effect for this modal is working at the beginning. 
          But if load the 2nd modal and close it, then this scrolling effect is not working anymore.
          --------------------------------------------------------
          Scrollin effect for this modal is working at the beginning. 
          But if load the 2nd modal and close it, then this scrolling effect is not working anymore.
          --------------------------------------------------------
          Scrollin effect for this modal is working at the beginning. 
          But if load the 2nd modal and close it, then this scrolling effect is not working anymore.
          --------------------------------------------------------
          Scrollin effect for this modal is working at the beginning. 
          But if load the 2nd modal and close it, then this scrolling effect is not working anymore.
          --------------------------------------------------------
          Scrollin effect for this modal is working at the beginning. 
          But if load the 2nd modal and close it, then this scrolling effect is not working anymore.
          --------------------------------------------------------
          Scrollin effect for this modal is working at the beginning. 
          But if load the 2nd modal and close it, then this scrolling effect is not working anymore.
          --------------------------------------------------------
          Scrollin effect for this modal is working at the beginning. 
          But if load the 2nd modal and close it, then this scrolling effect is not working anymore.
          --------------------------------------------------------
          Scrollin effect for this modal is working at the beginning. 
          But if load the 2nd modal and close it, then this scrolling effect is not working anymore.
          --------------------------------------------------------
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
        </div>
      </div>
    </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">2nd Modal title</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          Content for the dialog / modal goes here.
          Content for the dialog / modal goes here.
          Content for the dialog / modal goes here.
          Content for the dialog / modal goes here.
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
        </div>
      </div>
    </div>
</div>

score 2 · Answer 1 · answered Aug 25 '20 at 22:30

Basically, there are two options to solve this:

Add .modal-dialog-scrollable to your modal to only make it's content scrollable and not the whole container. Have a look at this fiddle.

<div class="modal" id="myModal">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      ...
    </div>
  </div>

Use a "old" solution that is part of this answer. Have a look on this fiddle:

$(document).on('hidden.bs.modal', '.modal', function () {
    $('.modal:visible').length && $(document.body).addClass('modal-open');
});

Good luck!

score 1 · Answer 2 · answered Aug 25 '20 at 22:46

1

Seems like, bootstrap removing the overflow in the y-direction. So this soluting works for me:

.modal {
    overflow-y: auto !important;
}

answered Aug 25 '20 at 22:46

Kazi

1,461
3
19
47

Scrolling effect is not working when creating a modal from another modal

2 Answers2