5

https://jsfiddle.net/e6x4hq9h/

Open the first modal. It opens fine. Removes the background scrollbar.

Open the modal from within that modal. It causes the scroll to go to the background.

I searched for other solutions and none of them seem to fix this. I tried everything on this page: Bootstrap modal: close current, open new among others.

Javascript:

// Only one of these modals should show at a time.
$('#myModal2').on('show.bs.modal', function (e) {
    $('#myModal').modal('hide');
})
.on('hide.bs.modal', function (e) {
    $('#myModal').modal('show');
});

Update: The first and second modal must also allow scrolling as can be seen in this fiddle: https://jsfiddle.net/e6x4hq9h/21/

Community
  • 1
  • 1
Joshua Dickerson
  • 401
  • 3
  • 11
  • How about this https://jsfiddle.net/e6x4hq9h/19/ – Adam Buchanan Smith May 26 '16 at 23:48
  • Same issue. Click the first modal. Then the second. Then close the second. The scroll is on the background. – Joshua Dickerson May 27 '16 at 02:36
  • .modal('handleUpdate') Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left. Only needed when the height of the modal changes while it is open. ```$('#myModal').modal('handleUpdate')``` – Joe RR May 31 '16 at 16:15
  • If you're recommending .modal('handleUpdate'), please post a fiddle of what you mean because I've tried that numerous ways without success. – Joshua Dickerson May 31 '16 at 17:12
  • Actually, that wouldn't change anything. It's only purpose is to correct the padding. See bootstrap.js where it says ``Modal.prototype.adjustDialog = function``` – Joshua Dickerson May 31 '16 at 17:14

3 Answers3

3

I think this is what you are looking for.

https://jsfiddle.net/hardikjain/e6x4hq9h/20/

changes:

$('#myModal2').on('show.bs.modal', function (e) {
    $('#myModal').modal('hide');
$('body').css("overflow","hidden");
})
.on('hide.bs.modal', function (e) {
    // @todo reload the job
    $('#myModal').modal('show');
});
$('#myModal').on('show.bs.modal', function (e) {
    // @todo reload the job
$('body').css("overflow","hidden");
})
.on('hide.bs.modal', function (e) {
    // @todo reload the job
$('body').css("overflow","visible");
});
Hardik Jain
  • 184
  • 8
  • *So* close. The second modal doesn't allow scrolling. I updated the issue and I'll update the question to reflect that. https://jsfiddle.net/e6x4hq9h/21/ – Joshua Dickerson May 27 '16 at 17:36
3

To elaborate further on Hardik response, what essentially is happening is a hard-coded, inline declarations for the .modal-open class to the body element. However, the .modal-open class, also has a nested declaration for .modal-open .modal where it sets the overflow-y property for the modal to be "auto" -- hence why it is scrollable. To accomplish this, add .css("overflow-y", "auto") to the modal that will be opened. This is what it would look like based off your fiddle:

$(document).ready(function () {

    // Only one of these modals should show at a time.
    $('#myModal2').on('show.bs.modal', function (e) {
        $('#myModal').modal('hide');
        $('body').css("overflow","hidden");
        $(this).css("overflow-y", "auto");
    })
    .on('hide.bs.modal', function (e) {
        // @todo reload the job
        $('#myModal')
            .modal('show')
            .css("overflow-y", "auto");
    });

    $('#myModal').on('show.bs.modal', function (e) {
        // @todo reload the job
        $('body').css("overflow","hidden");
    })
    .on('hide.bs.modal', function (e) {
        // @todo reload the job
        $('body').css("overflow","visible");
    });
});

Results viewable here: https://jsfiddle.net/e6x4hq9h/22/

Brandon R Him
  • 161
  • 5
0

Just add style

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

Fixes the scrolling issue

Johnson
  • 144
  • 8