Я использую модальный диалог Bootstrap на моем сайте (который отлично работает на рабочем столе). Когда я пытаюсь использовать эту функцию на iPhones и iPads, модалы не работают.
Есть ли причина для этого? Кто-нибудь придумал исправление для этого, используя CSS Bootstrap через @import?
Я использую файл переопределения Bootstrap для внесения изменений в Bootstrap CSS.
В наши дни у меня была такая же проблема, и выяснилось, что сафари на iOS по-разному работает с другими браузерами по отношению к одной вещи. Модальное окно не отображается на сафари, но во многих других браузерах, когда отсутствует href= "#".
не работает в Safari/iOS, но в других браузерах:
<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>
работает в Safari/iOS и других браузерах:
<li><a href="#" data-toggle="modal" data-target="#testModal">Modal</a></li>
Браузер iPhone, похоже, не поддерживает модальный переход "затухания". Отключите его полностью из своего модального диалогового окна, или если вы хотите получить фантазию, отключите его, только когда ваш сайт обнаружит устройство iPhone:
Это не работает на iPhone
<div class="modal hide fade" id="deleteConfirmation">
Это делает
<div class="modal hide" id="deleteConfirmation">
ознакомьтесь с http://jschr.github.com/bootstrap-modal/, поскольку он исправляет кучу модальных проблем.. все, что вам нужно сделать, это просто включить 2 js файла -
- bootstrap-modalmanager.js
- js/bootstrap-modal.js
и он просто работает
Я знаю, что немного опоздал на эту вечеринку, но у меня была такая же проблема, и я столкнулся с решением, которое решило его. Если кто-то другой сталкивается с той же проблемой и находит, что этот вопрос делает поиск, вот ответ:
Добавьте класс "clickable" к тому, что вы нажимаете на свое устройство iOS, которое должно было открыть модальное. Я предполагаю, что вы используете div, потому что тег или кнопка должны работать нормально. Затем в CSS добавьте следующее:
.clickable {
cursor:pointer;
}
Это не проблема Bootstrap, это проблема iOS. Указатель позволяет iOS знать, что все, что вы нажимаете, можно щелкнуть, что обычно не включает div.
Я не буду признавать этот ответ, я нашел его здесь: Bootstrap Modal не работает на устройствах iOS
это все еще остается открытой проблемой в проекте Bootstrap: https://github.com/twitter/bootstrap/issues/2130
Это может быть вызвано неправильным расположением диалогов. попробуйте сыграть с настройкой "top" в классе .modal.
У меня была аналогичная ошибка на моем мобильном устройстве (Android OS). Modal отлично работает на рабочем столе, но на мобильном устройстве не работает.
Проблема была в неправильном определении макета сетки.
Итак, определите .col-xs в любом столбце вашего макета, который сработал у меня.
У меня также была такая же проблема, когда моя кнопка для запуска Modal не работала на iPhone. Мне пришлось преобразовать тег <a> с помощью Rails link_to и предоставить все возможные атрибуты. то есть.,
= link_to "Open Modal", '#', :remote => true, "data-backdrop" => "modal-backdrop", "data-toggle" => "modal", "data-target" => "#myModal"
Очень просто, просто добавьте встроенный стиль, "курсор" к указателю, и он сразу заработает. style="cursor:pointer;"
<li><a data-toggle="modal" data-target="#testModal" style="cursor:pointer;">Modal</a></li>