Question

我有一个调用另一个bootstrap模式的bootstrap模式。现在的问题是，当我打开第二个bootstrap模态并关闭它时，第一个bootstrap模式不再滚动。而是通过背景主页获得滚动。我应该在这里做什么，这样当我关闭第二个模态时，第一个模态会聚焦并获得第二个模态之前的滚动。

$('#modalTrigger').on('click', function () {
    setTimeout(function () {
        $('#modalBody').html($('#contentText').html());
    }, 1000);
});

$('#btnPrimaryModalAction').on('click', function () {
    $('#secondaryModal').modal('show'); 
});

以下是JSFIDDLE的链接，其中包含定义上述情况的两个bootstrap模式。

Answer 1

显示的

Bootstrap模式为您的modal-open元素添加了一个新的<body>类。当关闭时，它会移除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>

Answer 2

你的问题必须解决当打开模态时bootstrap如何“锁定”body元素。在打开模态时，在body元素上添加类modal-open。当你打开第二个模态时，没有任何反应，但当你关闭它时，它会移除所需的类model-open。你需要为你的js添加一些逻辑来保持那个类，直到最后一个模态关闭。它并不是真的在模态中添加模态。

我建议尝试使用你可以通过bootstrap获得的模态事件方法来规避HERE

模态内的Bootstrap模态;关闭模态后无法滚动

2 个答案: