Bootstrap: scrollbar disappears after modal closes

Question

I am using Boostrap 3, and I have a modal displaying some HTML content, and it has a scroll bar since all the content is not suitable for viewing. There is a link inside this modal to open another modal. Everything works fine, the second modal opens, but when I close it, the scrollbar disappears and I cannot scroll the first modal (it is also impossible to scroll using the scroll wheel on the mouse). Here is the code for the modals:

<!-- First modal for creating voucher --> <div class="modal fade" id="createVoucherModal" tabindex="-1" role="dialog" aria-labelledby="createVoucherModal" aria-hidden="true"> <div class="modal-dialog" style="width: 800px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Zatvori</span></button> <h4 class="modal-title">Izradi voucher</h4> </div> <div id="voucher-modal-body" class="modal-body" style="margin: 20px 40px 20px 40px;"> <!-- here goes dinamically created content (with jQuery) --> </div> <div class="modal-footer"> <a id="modal-create-pdf" href="" target="_blank"><button type="button" class="btn btn-primary" id="">Kreiraj PDF</button></a> <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button> </div> </div> </div> </div> <!-- Second modal for editing note voucher --> <div class="modal fade" id="editVoucherNoteModal" tabindex="-1" role="dialog" aria-labelledby="editVoucherNoteModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Zatvori</span></button> <h4 class="modal-title">Uredi bilješke</h4> </div> <div id="voucher-modal-body" class="modal-body"> <textarea style="width: 100%; height: 100px;" id="voucher_note_input"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary voucher_note_edit_button">Spremi</button> <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button> </div> </div> </div> </div> 

The body of the first modal is empty because it is dynamically generated using jQuery, but here is a link to open the second modal

 <a href="javascript:;" data-toggle="modal" data-target="#editVoucherNoteModal" id="voucher_note_edit" style="display: none;">Uredi</a> 

Images are related since I cannot upload them there without 10 reputation:

Pictures

The first shows the first modal open, in the second picture the second modal is open, and in the third image the second modal is closed and there is no scroll bar.

Answer 1

I was impatient, so I kept trying and finally found a solution that works. I added

 style="overflow-y: scroll;" 

for the first modal div element, now it looks like this:

 <div class="modal fade" style="overflow-y: scroll;" id="createVoucherModal" tabindex="-1" role="dialog" aria-labelledby="createVoucherModal" aria-hidden="true"> <div class="modal-dialog" style="width: 800px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Zatvori</span></button> <h4 class="modal-title">Izradi voucher</h4> </div> <div id="voucher-modal-body" class="modal-body" style="margin: 20px 40px 20px 40px;"> </div> <div class="modal-footer"> <a id="modal-create-pdf" href="" target="_blank"><button type="button" class="btn btn-primary" id="">Kreiraj PDF</button></a> <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button> </div> </div> </div> </div> 

And it works!

Answer 2

Another way could be to add a remote “modally open” class from the “body” after hiding the second modal:

 $( '#editVoucherNoteModal' ).on( 'hidden.bs.modal' , function() { $( 'body' ).addClass( 'modal-open' ); } ); 

This works for your example, but if you have other modal access, you can use this workaround:

 $( '#editVoucherNoteModal' ).on( 'hidden.bs.modal' , function() { if ( $( '.modal:visible' ).length ) { $( 'body' ).addClass( 'modal-open' ); } } ); 

Note. There will be a behavior “weird” (and I say “weird by my standards”) with a scroll bar and the correct body addition that may be required to search Bootstrap in the JS code, but for quick use I give that it worked for me.

Answer 3

I did something like this:

  $('.modal').on('shown.bs.modal', function () { $('body').addClass('modal-open'); }) $(".modal [data-toggle='modal']").click(function(){ $(this).closest(".modal").modal('hide'); }); 

It will be used for any modal modality that appears. Please note that the first one is closed so that the second appears. No changes to the structure of Bootstrap.