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

Question

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

How to prevent background scroll when bootstrap modal is open

Prevent BODY from scrolling when a modal is opened

bootstrap-issue

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;
}

希望它成为修复屏幕，但它不起作用。

编辑

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

编辑2

我遵循@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);

});

使模态索引正确。添加 padding-left: 0px when modal show up 后没有解决这个问题。我也尝试添加

overflow: hidden; position: fixed;

在我的css中，正如我所说，当页面不长于屏幕时它工作得很好，但是当我得到一个很长的页面时我无法滚动模式。面对，我有一个在线示例，希望这会有所帮助modal-issue

Answer 1

根据bootstrap-issues

我设置

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

解决问题！