Question

我使用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

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

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>

它有效！

Answer 2

另一种方法可能是在隐藏第二个模态后从'body'添加删除的'modal-open'类：

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

这适用于您的示例，但如果您打开了另一个模式，则可以使用此解决方法：

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

注意：对于可能需要查找Bootstrap JS代码的滚动条和右侧填充，会有一个“怪异”（我说我的标准很奇怪）行为，但为了快速使用，我给出了它对我有用。

Answer 3

我做了类似的事情：

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

  $(".modal [data-toggle='modal']").click(function(){
    $(this).closest(".modal").modal('hide');
  });

它将用于出现的模态中的任何模态。请注意，第一个它关闭所以第二个出现。 Bootstrap结构没有变化。

Bootstrap：关闭模式后滚动条消失

3 个答案: