Sigit prasetya nugroho Sigit prasetya nugroho - 2 months ago 20
CSS Question

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

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



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

$("#myModal2").on('', 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)


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

   overflow:auto !important;