2

我在 iPad 上的 Bootstrap 模式存在一些问题。

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

有没有人遇到过这个问题并克服了？

这是一个问题的例子。

4

2 回答 2

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 ...”语句放在模态的 on 函数中，只有当用户的浏览器是 iSomething 时才会触发这个代码。

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

于 2014-05-16T20:39:57.363 回答
0 
$(document).on('blur', 'input, textarea', function () { setTimeout(function () { window.scrollTo(document.body.scrollLeft, document.body.scrollTop); }, 0); });

上面的代码帮助我修复它。

参考： iOS iPad 键盘打开时固定位置中断

于 2014-08-29T07:28:09.677 回答