Bootstrap modal doesn't work on iPhone - css

Question

I'm using a Bootstrap modal dialog on my site (which works fine on desktop). When I try to use this function on iPhones and iPads, the modals do not work.
Is there a reason for this? Has anyone come up with a fix for this whilst using Bootstrap's CSS via #import?
I use the Bootstrap override file to make changes to the Bootstrap CSS.

Answer 1

I had the same problem these days and figured out, that safari on iOS is working differently to other browsers with respect to one thing. The modal window is not shown on safari but on many other browsers, when there is a href="#" missing.
not working on Safari/iOS but other browsers:
<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>
working on Safari/iOS and other browsers:
<li>Modal</li>

Answer 2

The iPhone's browser doesn't seem to support the modal's "fade" transition. Disable it entirely from your modal dialog box, or if you want to get fancy, disable only when your site detects an iPhone device:
This doesn't work on the iPhone
<div class="modal hide fade" id="deleteConfirmation">
This does
<div class="modal hide" id="deleteConfirmation">

Answer 3

please check out http://jschr.github.com/bootstrap-modal/ as it fixes a bunch of the modal issues.. all you'll have to do is just include the 2 js files --
- bootstrap-modalmanager.js
- js/bootstrap-modal.js
and it just works

Answer 4

I know I'm a little late to this party but I was having the same problem and came across a solution that solved it. In case anyone else is having the same problem and finds this question doing a search here is the answer:
Add the class "clickable" to whatever you're tapping on with your iOS device that's supposed to open the modal. I assume you're using a div because an a tag or button should work just fine. Then in your CSS put this:
.clickable {
cursor:pointer;
}
This is not a Bootstrap problem, it's an iOS problem. The pointer lets iOS know that whatever you're tapping on is clickable, which normally doesn't include a div.
I won't take credit for this answer, I found it here:
Bootstrap Modal does not work on iOS devices

Answer 5

this is still an open issue on the Bootstrap Project:
https://github.com/twitter/bootstrap/issues/2130

Answer 6

This may be caused by incorrect dialog positioning. try playing with the "top" setting in the .modal class.

Answer 7

I had similar error on my mobile device (Android OS).
Modal works fine on desktop but on mobile doesn't work.
Problem was in my wrong definition of grid layout.
So, define .col-xs in any column of your layout, that worked for me.

Answer 8

I also had the same problem where my button to trigger Modal was not working on iPhone. I had to convert the <a> tag with Rails link_to and providing all possible attributes. ie.,
= link_to "Open Modal", '#', :remote => true, "data-backdrop" => "modal-backdrop", "data-toggle" => "modal", "data-target" => "#myModal"

Answer 9

Very easy, just add the an inline style, "cursor" to pointer and it will work straight away. style="cursor:pointer;"
<li><a data-toggle="modal" data-target="#testModal" style="cursor:pointer;">Modal</a></li>

Answer 10

If you're trying to display a modal during form submission, then you'll need to make sure the modal is activated before the submit event. This is because iOS Safari doesn't allow animations during form submission.
I was displaying my modal after jquery validation completed, which was too late. So instead I show the modal on button click, and dismiss it if jquery validation fails during the submit event.