Bootstrap: scrollbar disappears after closing modal

Question

I'm using Boostrap 3 and I have one modal displaying some HTML contents, and it has a scrollbar since all content doesn't fit into viewport. Inside this modal, there's a link to open another modal. Everything works fine, the second modal opens but when I close it, the scrollbar disappears and I can't scroll on the first modal (it's not possible to scroll with scroll wheel on mouse as well). Here's the code for 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>

Body of the first modal is empty because it's dinamically generated with jQuery, but here's the link for opening second modal

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

Pictures are linked, since I can't upload them there without 10 reputation:

Pictures

First one shows first modal opened, on the second picture there's second modal opened and on the third picture the second modal is closed and there's no scrollbar.

Answer 1

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

style="overflow-y: scroll;"

to 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 might be to add the removed 'modal-open' class from the 'body' after the second modal is hidden:

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

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

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

Note: There's gonna be a 'weird' (and I say weird to my standards) behavior with the scroll bar and right padding of the body that might need a lookup to the Bootstrap JS Code, but for a quick use I give what it worked for me.