jquery – Bootstrap：关闭模态后滚动条消失

我正在使用Boostrap 3,我有一个模式显示一些 HTML内容,它有一个滚动条,因为所有内容都不适合视口.在这个模态中,有一个链接可以打开另一个模态.一切正常,第二个模态打开但是当我关闭它时,滚动条消失了,我无法在第一个模态上滚动(也不可能在鼠标上滚动滚轮).这是模态的代码：

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

第一个显示第一个模态打开,第二个图像打开第二个模态,第三个图像第二个模态关闭,没有滚动条.

解决方法

我不耐烦所以我一直在努力,最后找到了一个有效的解决方案.我补充道

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>

它的工作原理！

原文地址：https://www.jb51.cc/jquery/178697.html