模态内部的自举模态；关闭模式后无法滚动

本文介绍了模态内部的自举模态；关闭模式后无法滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个引导程序模态，它调用了另一个引导程序模态.现在的问题是，当我打开第二个引导程序模态并关闭它时，第一个引导程序模态不再滚动.相反，滚动是通过后台主页获得的.我在这里应该做些什么，以便当我关闭第二个模态时，第一个模态得到聚焦并获得第二个模态之前的滚动.

I have a bootstrap modal that calls the another bootstrap modal. Now the issue is that when I open the second bootstrap modal and close it the first bootstrap modal does not scroll any more. Instead the scroll is obtained by the background main page. What should I need to do here so that when i close the second modal then the first modal gets focused and obtain the scroll as it was before the second modal.

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

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

这是 JSFIDDLE 的链接，其中包含定义上述情况的两个引导程序模式. /p>

Here is the link to JSFIDDLE that contains the two bootstrap modal which defines the situation mentioned above.

推荐答案

Bootstrap模态(如图所示)将新的modal-open类添加到您的<body>元素中.并在关闭时删除modal-open类.

Bootstrap modal when shown adds a new modal-open class to your <body> element. And when being closed, it removes the modal-open class.

因此，在关闭子模式时，只需要将该类重新应用于<body>元素即可.这是东西:

So you only need to re-apply that class to your <body> element when closing the child modal. Here's the thing:

为父模态内的模态添加一个新的自定义css类.

Add a new custom css class for the modals inside your parent modal.

在我的情况下，我使用.child-modal

in my case, I use .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>

这篇关于模态内部的自举模态；关闭模式后无法滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！