Bootstrap 3中带有文本区域的模态框。当点击/聚焦在文本区域时，背景滚动到顶部。仅适用于iOS 8。

Question

我正在使用Bootstrap 3.2.0。

我可以正常显示模态框，背景也保持不变。模态框包含一个文本区域。当我点击或聚焦到该文本区域时，虚拟键盘弹出，背景滚动到顶部。

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

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

非常令人沮丧。有没有人遇到过这种问题？有什么解决办法吗？

更新：我认为这与模态框的fixed定位有关，而不是absolute定位。iOS希望将焦点元素放在屏幕中间，因此它会滚动视口或文档，直到元素位于中心，但滚动无效，因为该元素是固定定位的。

- teewuane

---

虚拟键盘另外，请注意，如果您在模态框或导航栏中使用输入框，iOS 存在一个渲染错误，当触发虚拟键盘时不会更新固定元素的位置。一些解决方法包括将您的元素转换为 position: absolute 或在聚焦时调用计时器手动纠正位置。这不是由 Bootstrap 处理的，因此由您决定哪种解决方案最适合您的应用程序。 - Christina

只需在这些模态框上将其定位为绝对位置。 - Christina

谢谢@Christina，我正在努力将这些元素设置为position: absolute;并确定新的顶部值是多少。 - teewuane

只需将背景 top:0;left:0;right:0;bottom:0; position:absolute。 - Christina

屏幕键盘 == DOM Gremlin。在涉及到屏幕键盘的任何位置，要注意不要过于花哨地定位。你永远不知道它们会做什么或者它们会如何改变。 - Lane

Answer 1

您可以在全局添加此属性：

if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
    var styleEl = document.createElement('style'), styleSheet;
    document.head.appendChild(styleEl);
    styleSheet = styleEl.sheet;
    styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
 }

- Hetdev

Answer 2

对我来说解决方案是将涉及到的弹出框设置为 position:absolute;（默认为position: fixed;），不要将弹出框附加到body底部，而是将其附加到我单击以显示弹出框的按钮的父元素上。 我还需要确保我将弹出框附加到的元素具有相对位置。

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 帮助我发现了这个解决方案。

- teewuane