Question

起初，我遇到了同样的问题：

Bootstrap3.3.5
jQuery2.1.4
Bootstrap-material-design

我的第一个问题是当我在iPhone和iPad上使用Safari 601.1（都在iOS9上运行）打开模态并滚动它时，模态没有滚动而是背景滚动。我按照上面的建议。添加

body.modal-open {
    overflow: hidden;
    position: fixed;
}

在css中或添加一些js脚本。模态固定，因为他们说。但另一个问题出现，我不能再滚动模态，即使模态内容比屏幕长。像这样

我也试过设置模态

body.modal-open {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

并希望它能够修复屏幕，但它不起作用。

修改

什么是有线的是当我关闭模态并再次打开时，一切正常！我想这是第一次加载模态中的图像。有什么想法吗？

EDIT2

我按照@Vignesh Pandi的建议，第一次打开模态时的模态风格

z-index: 1040; display: block;

，第二次是

z-index: 1040; display: block; padding-left: 0px;

我添加了z-index，因为我在单页中有多模态，我添加了这个：

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
    $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);

}）;

使模态索引正确。添加填充左：0px当模态显示时没有解决这个问题。我也尝试添加

overflow: hidden; position: fixed;

在我的CSS中，正如我的悲伤一样，当页面不长于屏幕时，它运行良好，但是当我得到一个很长的页面时，我无法嘲笑模态。面对面，我有一个在线示例，希望这会有助modal-issue

Answer 1

根据bootstrap-issues

我设置

.modal {
    -webkit-overflow-scrolling: auto;
}

解决问题！

设置背景时，如何使模态可滚动？

修改

EDIT2

1 个答案: