引導模態內部模態背景滾動

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>