Stacking modals scrolls the main page when one is closed

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?

It seems that you only have to add `data-backdrop="false"` to your nested modals, see: http://jsfiddle.net/u038t9L0/ — Bass Jobsen, Dec 09 '14 at 08:54
Backdrop's not the problem (fixed that in the last paragraph of the question). Not being able to scroll through shown modals if the top one is closed is. Add long content you'd have to scroll through in the body along with each of the modals in jsfiddle. Open each of the modals, you'll notice you can scroll up and down. Close one and you'll notice that the modal/s still up don't scroll but the content in the body (that's not in any modal) does. — maki57, Dec 09 '14 at 12:56

score 54 · Accepted Answer · edited Feb 09 '22 at 16:49

54

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.

edited Feb 09 '22 at 16:49

Undo

25,519
37
106
129

answered Dec 09 '14 at 13:19

Bass Jobsen

48,736
16
143
224

2

Working with angular, modals appears dinamically on the body. For this reason, it is neccesary to change the selector to `$('body').on('hidden.bs.modal', '.modal', function (e) {}`. This will work with modals inside templates – LTroya Feb 16 '17 at 17:38
1

For Bootstrap 4, use the 2nd line `if($('.modal').hasClass('show')) {` instead – Danny Jun 19 '20 at 09:38

Stacking modals scrolls the main page when one is closed

1 Answers1

Linked