Question

我正在使用带有输入形式的Bootstrap 3模态。我试图通过在iOS（Mobile Safari）上更新固定位置输入来解决问题。为模态设置绝对位置的解决方法之一。我找到了这个脚本并尝试启动。

$(document).ready(function(){
var isiPhone = /iPhone/i.test(navigator.userAgent.toLowerCase());
    if(isiPhone) {
    $('.modal').on('shown.bs.modal', function() {
        $(this)
            .css({
            position: 'absolute',
            marginTop: $(window).scrollTop() + 'px',
            bottom: 'auto',
            top:'auto'
            });

    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'
        });
    }, 500);

    var currentscroll = $(window).scrollTop();
    $('input').on('blur', function() {
                if (!event.relatedTarget) {
                $(window).scrollTop(currentscroll);
                }
        });
 });}})

工作正常。当模态打开时 - 位置变为绝对。专注于输入也能正常工作。但是我有很长的文档，当模态打开时，模态前后有额外的空间。模态滚动与身体，它不好。我看到三种解决方案，但我不知道如何制作它：

防止具有绝对位置的模态滚动，直到输入形式不清晰。
限制小范围内的模态滚动，以避免文档较长时长滚动。
在焦点输入时将位置从固定更改为绝对，在模糊输入时更改位置。

感谢您的帮助。

Bootstrap 3模式，在Mobile Safari上有输入问题

0 个答案: