Stacking modals scrolls the main page when one is closed [duplicate]

Question

With Bootstrap 3.3.1, I was able to get stacking modals without any additional scripts (as in copy-pasting the modal templates in the Bootstrap site and making many of them in the same page). The problem was that whenever the top (highest) modal is closed, scrolling focus goes to the main page (under all remaining modals) and goes back to the top modal only if a new modal is opened. Is there a way to set the scrolling focus to the next modal and not the main page?

When I tested the solution here (and even this one) by adding text to the body and individual modals (through Firefox's "Edit as HTML" to test scrolling) and it had the characteristics that I needed.

A problem that occurred when I tried it with the latest jQuery and Bootstrap was that the modal-backdrop then shows above the modal-dialog. Upon Inspect Element whenever one or more modals are up, I noticed that the div for the modal-backdrop appears within the main div of the modal:

<div id="myModal" class="modal fade" aria-hidden="true" style="display: none;">
  <div class="modal-backdrop fade in"></div>
  <div class="modal-dialog modal-lg"></div>
</div>

as compared to the bottom of body like it is here. This even happens when I use 3.3.1 on that linked example. I think this resulted in the main div and modal-backdrop having the modified z-index, but not the modal-dialog, so I tried to fix it by adding a line to set the modal-dialog to have its parent's z-index plus 1. It put the backdrops in their proper place, but the scrolling problem persists. Is this because of a change in 3.3.1 or was I looking at the wrong solution?

Answer 1

Backdrop's not the problem. Not being able to scroll through shown modals if the top one is closed is.

You should add the following Javascript:

$('.modal').on('hidden.bs.modal', function (e) {
    // For Bootstrap 4:
    // if ($('.modal').hasClass('show')) {
    if ($('.modal').hasClass('in')) {
        $('body').addClass('modal-open');
    }    
});

demo: http://jsfiddle.net/u038t9L0/1/

When the body has class modal-open the following CSS will be applied for your .modals:

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

Closing the modal will remove the modal-open class from the modal too.