javascript - Modal 上的 Bootstrap 叠加控件 - 滚动问题

Question

我一直致力于一个小元素，该元素在模态上集成了 Bootstrap 轮播控件，这样用户就可以从一个模态导航到另一个模态，而无需单击它。它工作完美，除了一件事，在第一个模式之后，用户不能再在打开的模式内向下滚动。

我认为这与我使用 z-index 将控件(.pull-front)放在 body 前面有关。 ，但是我需要控件 <a>它是可访问的，并且只占用屏幕边缘的一小块区域。不确定他们为什么要涵盖实际内容？有任何想法吗？在此先感谢兄弟们!

.pull-front {
  z-index:9;
  cursor: pointer;
}

我用确切的情况做了一个代码笔: http://codepen.io/simplecreatif/pen/bWQYVQ

Answer 1

这是因为当您单击 next 或 prev 按钮时，bootstrap 会从正文中删除 .modal-open 类。如果模态打开，则必须将 modal-open 类添加到 body。

所以在你的js中加入这段代码

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

这是链接:http://codepen.io/anon/pen/GmwygL