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

Question

I created several modal dialog dialogs with bootstrap v.3.3.5. when I run the first modal dialog , the scroll bar is working correctly, but after starting the second modal dialog and closing its scroll bar disappears.

There is no problem with bootstrap v.3.0.0, as you can see in the demo below

modal dialog with bootstrap v.3.0.0

But in bootstrap v.3.3.5 there is a problem

modal dialog with loading v.3.3.5

Answer 1

Demo

For some reason, it removes my modal-open class from the body, and that scrollbar disappears. So here is a neat trick to capture the .modal closing .modal and check if any .modal , and if so, add the .modal-open class to the 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 several modals nested within each other, just replace $("#myModal2") with $(document)

UPDATE

Recently, I found out that this can be done using pure CSS with only a string, as shown below:

 .modal{ overflow:auto !important; } 

UPDATED DEMO

Answer 2

Dynamically added modalities

 $(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'); } }); 

Answer 3

Do one thing, just add the following to your CSS:

 #myModal{ overflow:auto !important; } 

Hope this helps!