Multiple modal dialog scroll bar Bootstrap v.3.3.5 not working well

Question

I created multiple modal dialog with bootstrap v.3.3.5. when I launched the first modal dialog, the scrollbar in the right working well but after I launch the second modal dialog, and close it, the scrollbar disappears.

In bootstrap v.3.0.0 there isn't any problem as you can see in below demo

modal dialog with bootstrap v.3.0.0

But, in bootstrap v.3.3.5 there problem exists

modal dialog with bootstrap v.3.3.5

Answer 1

DEMO

For some reason it is removing my modal-open class from body and this scrollbar disappears. So here is a neat trick to capture the close event of .modal and check if any .modal is open and if yes add the .modal-open class to body

$("#myModal2").on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) //check if any modal is open
  {
    $('body').addClass('modal-open');//add class to body
  }
});

Now if you have multiple modals nesting inside each other, just replace $("#myModal2") with $(document)

UPDATE

Lately I came to know that this can be done with pure CSS with just a line as below:

.modal{
   overflow:auto !important;
}

UPDATED DEMO

Answer 2

Dynamically added modals

$(document).on('hidden.bs.modal', '.modal', function () {
    if ($('body').find('.modal.in').length > 0) {
        $('body').addClass('modal-open');
    }
});

Update for Bootstrap 4

$(document).on('hidden.bs.modal', '.modal', function () {
    if ($('body').find('.modal.show').length > 0) {
        $('body').addClass('modal-open');
    }
});