javascript - Bootstrap 3 Modal，里面有文本区域。当点击/聚焦文本区域时，背景会滚动到顶部。仅限 iOS 8

Question

我正在使用 Bootstrap 3.2.0。

我可以很好地显示模态，背景保持不变。模态包含一个 textarea。当我点击或专注于该文本区域并且出现虚拟键盘时，背景会滚动到顶部。

这只发生在 iOS 8 而不是 iOS 7。

这就像 iOS 8 想要将焦点放在屏幕中间，然后滚动直到该元素位于中间。它向上滚动，向上滚动，直到到达顶部，然后将模态下拉一点。

非常沮丧。有没有人经历过这个？有什么解决办法吗？

更新:我认为这与模态是固定位置而不是绝对这一事实有关。 iOS 希望将获得焦点的元素放在屏幕中间，因此它会向上滚动视口(viewport)或文档，直到元素位于中心，但滚动不会执行任何操作，因为元素的位置是固定的。

Answer 1

我的解决方案是将涉及的模态设置为 position:absolute;(默认情况下它是 position: fixed;)，而不是将模态放在通过将它附加到主体，我的 HTML 底部，我将它附加到我单击以显示模态的按钮的父元素。我还需要确保将模态附加到的元素具有相对位置。

CSS

.modal.fade.my-special-modal {
    position: absolute;
    /* 'top' is not required but I did it for my taste */
    top: 15px;
}

.my-special-modal-container {
    position: relative;
}

HTML

<div class="my-special-modal-container">
    <button>Show the modal</button>
    <!-- js will inject the modal here -->
</div>

感谢@Christina 帮助我发现了这个解决方案。