Модальное окно c input и iOS
Здравствуйте.
Возник вопрос по модальным окнам. Я использую Bootstrap 3. При использовании модального окна с элементами input, у него есть проблема – при вызове экранной клавиатуры некорректно отрабатываются элементы с fixed position. Проще говоря, когда тыкаем в input происходят нехорошие рывки. Чтобы обойти эту проблему есть два варианта, первый это задать модальному окну position absolute, а второй – вызвать таймер при событии focus и скорректировать позицию. Я попробовал с помощью скрипта сделать первый вариант. После открытия модального окна задать позицию absolute. Это работает. Но если документ длинный – модальное окно скроллится вместе с ним, а до и после окна получаются некрасивые большие промежутки. Чтобы избавится от них можно ограничить скролл, но не знаю как. Поэтому решил сделать так, при открытие окна у него position fixed и оно скроллится в пределах своего размера. При событии focus (когда тыкаем в input) у окна position absolute, что позволяет нормально вызвать клавиатуру и корретно отработать скроллы при заполнении полей input. Окончательный вариант скрипта такой. Но работает он некорректно. Подскажите как правильнее решить задачу, в какую сторону копать ? $(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', }); 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 currentAbsoluteScroll = $(window).scrollTop(); $('.modal').css({ position: 'fixed', marginTop: 'auto', bottom: '0', }); var currentFixedScroll = $(window).scrollTop(); $('input').on('focus', function() { $('.modal').css({ position: 'absolute', marginTop: $(window).scrollTop() + 'px', bottom: 'auto', }); $(window).scrollTop(currentAbsoluteScroll); }); $('input').on('blur', function() { if (!event.relatedTarget) { $(window).scrollTop(currentAbsoluteScroll); } $('.modal').css({ position: 'fixed', marginTop: 'auto', bottom: '0', }); $(window).scrollTop(currentFixedScroll); }); }); }}); </script> |
такая же проблема. есть решения?
|
Я сталкивался с этим, это баг браузера, решал, как советовал парень в самом низу этого треда
|
Часовой пояс GMT +3, время: 14:29. |