Для контекста - я использую jquery 2.1 и Bootstrap 3.2.
У меня есть модальное окно, в котором представлена форма поиска и кнопка «Поиск». Под формой поиска есть блок div, зарезервированный для отображения результатов запроса в том же модальном режиме. Результаты вводятся в div с помощью javascript. Затем пользователю разрешается выбрать один из результатов и отправить свой выбор (второе событие отправки).
Таким образом, модальный html (отображаемый вместе с главной страницей):
<form id="'.$formid.'" method="post" action="/control/mm_form_handler.php">
<div class="form-container text-center">
<div class="form-row " >
<input name="f_name" type="text" required/>
<input name="l_name" type="text" required/>
</div>
<div>
<input type="submit" class="btn search-btn btn-xs" value="Go Search" />
</div>
</div>
</form>
<div id="search_results"></div>
Модальная форма поиска отправляется через javascript с использованием плагина Malsup jQuery_form следующим образом:
$( document ).on('click','.search-btn',function(e) {
e.preventDefault();
var formID = $(this).closest("form").attr('id');
$('#search_results').html('');
$('#search_results').prepend('<div class="waiting"></div><p>Please be patient. This could take a little time...</p>');
var options = {
data: {'formID':formID},
success: function (data) {
$('#search_results').html(data);
},
error: function() {
alert('post failed');
}
};
$('#'+formID).ajaxSubmit(options);
});
А обработчик — это php-скрипт, который получает вероятные совпадения из базы данных и форматирует их в блоки с переключателями, чтобы пользователь мог выбрать (близкое) совпадение. Построенная строка html, в конце, отображается эхом и отображается в div "search_results" (см. javascript).
Я думаю, что имеет значение только (потому что он отлично работает на ПК/Mac), что возвращается строка html и контента.
Таким образом, эта настройка отлично работает на ПК/Mac с Chrome, Safari или Firefox.
Проблема в iOS, Chrome и Safari.
В iOS 7.1.2 (iphone 4S) при отправке формы поиска (.search_btn) экран искажается — верхняя половина экрана — это модальная форма поиска (поверх серого фона поверх исходного page), а нижняя половина — это содержимое страницы запуска модального окна, расположенной ПОВЕРХ нижней половины модального окна. Проведя пальцем вниз по нижней половине, открывается полное модальное окно. Второе нажатие кнопки поиска приводит к получению и отображению результатов в модальном режиме точно так же, как на ПК/Mac.
В iOS 8.0.2 (iphone 6 — да, я сделал решительный шаг сегодня) страница остается серой, но модальное окно полностью исчезает (нет формы поиска, не возвращается контент и т. д.), а браузер блокируется.
Я попытался удалить предварительно добавленный контент, вставленный в search_results, но получил точно такие же результаты с этим контентом или без него.
Любые подсказки, что мне нужно сделать, чтобы заставить браузеры iOS вести себя так, как браузеры для настольных компьютеров?
<div class="modal-body"></div>
в стандартном модальном окне начальной загрузки. getbootstrap.com/javascript/#modals. Поскольку бутстрап вряд ли будет здесь проблемой, я удалил тег SO для этого поста. - person globalSchmidt   schedule 27.09.2014