Здравствуйте.
Возник вопрос по модальным окнам. Я использую 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>
