jquery - Bootstrap : scrollbar disappears after closing modal

Question

我正在使用 Boostrap 3，并且有一个模式显示一些 HTML 内容，并且它有一个滚动条，因为所有内容都不适合视口(viewport)。在此模式中，有一个用于打开另一个模式的链接。一切正常，第二个模式打开，但是当我关闭它时，滚动条消失，我无法在第一个模式上滚动(也无法使用鼠标滚轮滚动)。这是模态框的代码:

<!-- 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>

第一个模态框的主体是空的，因为它是用 jQuery 动态生成的，但这里是打开第二个模态框的链接

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

图片已链接，因为没有 10 声望我无法将它们上传到那里:

Pictures

第一张图片显示第一个模式打开，第二张图片显示第二个模式打开，第三张图片第二个模式关闭并且没有滚动条。

Answer 1

我很不耐烦，所以我不断尝试，终于找到了一个可行的解决方案。我添加了

style="overflow-y: scroll;"

到第一个模态 DIV 元素，现在它看起来像这样:

<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>

而且它有效!