引导模态内部模态背景滚动

Question

我有一个内容很长的模式，还有一个可以打开另一个模式的按钮。 当我关闭内部模态时，外部模态被卡住。 它无法滚动，而是背景开始滚动。

我发现了一些与模态和滚动有关的问题，例如模态中的引导模态，以及在打开模态时阻止BODY滚动 ，但我的问题似乎不在此处重复。

我已经从Bootstrap 3中 拨弄了一个小提琴 ：防止模态内部模态每次触发（hidden.bs.modal）来演示此问题。 在第二个模态中单击“取消”后，第一个模态被卡住。

码：

 $('#btnUploadCancel').click(function() { $('#uploadImage').modal('toggle'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button> <p> Lorem ipsum .... long content </p> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Demo Modal</h4> </div> <div class="modal-body"> <p> <a href="#" data-toggle="modal" data-target="#uploadImage" class="btn btn-primary">Upload image</a> </p> Lorem ipsum ... long content <p> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> <div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="uploadImage-title">Upload new image</h4> </div> <div class="modal-body"> Testing Area </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button> <button type="button" class="btn btn-success">Accept</button> </div> </div> </div> </div> </div> 

Answer 1

编辑您的JavaScript，使第一个模态保持打开状态，如下所示-

    $('#btnUploadCancel').click(function () {
    $('#uploadImage').modal('toggle');

    $('body').addClass('modal-open');
});

Answer 2

$('.modal').on('show.bs.modal', function (event) {
        var idx = $('.modal:visible').length;
        $(this).css('z-index', 1040 + (10 * idx));
    });
    $('.modal').on('shown.bs.modal', function (event) {
        var idx = ($('.modal:visible').length) - 1; // raise backdrop after animation.
        $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
        $('.modal-backdrop').not('.stacked').addClass('stacked'); 
    });
   $('.modal').on('hide.bs.modal', function (event) { 
        var modal_length =  $('.modal:visible').length;
        if (modal_length>1)
        {
            $("body").css("overflow","hidden");
            $('.modal:visible').css("overflow-y","auto");
        }
    });

Answer 3

出现引导模态时，会向您的body元素添加一个新的modal-open类。 并且在关闭时，它会删除modal-open类。

因此，在关闭子模式时，只需要将该类重新应用到body元素即可。 这是东西：

在父模态中为模态添加一个新的自定义css类。

就我而言，我使用.child-modal ，

/* when using a modal within a modal, add this class on the child modal */
$(document).find('.child-modal').on('hidden.bs.modal', function () {
    console.log('hiding child modal');
    $('body').addClass('modal-open');
});

HTML

<div class="modal fade" tabindex="-1" role="dialog">
     ...
     <a href="#" data-toggle="modal" data-target="#other_modal" title="Help">
       Open the other modal
     </a>
     ...
</div>
<div class="modal fade child-modal" id="other_modal" tabindex="-1" role="dialog">
   ... other codes here ...
</div>

请参见下面的工作片段：

 $('#btnUploadCancel').click(function() { $('#uploadImage').modal('toggle'); }); $(document).find('.child-modal').on('hidden.bs.modal', function () { console.log('hiding child modal'); $('body').addClass('modal-open'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button> <p> Lorem ipsum .... long content </p> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Demo Modal</h4> </div> <div class="modal-body"> <p> <a href="#" data-toggle="modal" data-target="#uploadImage" class="btn btn-primary">Upload image</a> </p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <p> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> <div class="modal child-modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="uploadImage-title">Upload new image</h4> </div> <div class="modal-body"> Testing Area Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button> <button type="button" class="btn btn-success">Accept</button> </div> </div> </div> </div> </div>