iPad 上的 Twitter Bootstrap 模态问题答案

【问题标题】：Twitter Bootstrap Modal issues on iPadiPad 上的 Twitter Bootstrap 模态问题
【发布时间】：2013-08-08 06:23:14
【问题描述】：

我在 iPad 上使用 Bootstrap 模式时遇到了一些问题。

我在 Bootstap 模式中有一个表单。当我点击下拉输入时，会出现虚拟键盘，并在页面重叠的位置剪切/剪辑页面。然后，当您向上滑动页面以查看更多内容时，页面不再滚动。此问题在横向 iPad 方向中更为明显。

有人遇到过这个问题并解决了吗？

这是example of the problem。

【问题讨论】：

标签： ipad twitter-bootstrap modal-dialog

【解决方案1】：

对于遇到这个问题的任性灵魂（就像我所做的那样），@Dan 的 github 参考有解决这个问题的方法。

一位开发人员 (ridjohansen) 建议使用：

if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {

$('.modal').on('show.bs.modal', function() {

    // Position modal absolute and bump it down to the scrollPosition
    $(this)
    .css({
        position: 'absolute',
        marginTop: $(window).scrollTop() + 'px',
        bottom: 'auto'
    });

    // Position backdrop absolute and make it span the entire page
    //
    // Also dirty, but we need to tap into the backdrop after Boostrap 
    // positions it but before transitions finish.
    //
    setTimeout( function() {
    $('.modal-backdrop').css({
        position: 'absolute', 
        top: 0, 
        left: 0,
        width: '100%',
        height: Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
        ) + 'px'
    });
    }, 0);
});
}

有点难看，但它确实有效。我对此稍作修改，将代码放入我的 document.ready 中，并将“if navigator...”语句放入 modal 的 on 函数中，仅当用户的浏览器是 iSomething 时才会触发此代码。

只是想分享一下，以防这个 git 对话消失了..

【讨论】：

【解决方案2】：

$(document).on('blur', 'input, textarea', function () { setTimeout(function () { window.scrollTo(document.body.scrollLeft, document.body.scrollTop); }, 0); });

以上代码帮助我修复它。

参考： iOS iPad Fixed position breaks when keyboard is opened

【讨论】：