Bootstrap modal doesn't work on iPhone

Viewed 40882

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.

10 Answers

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"

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>

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.

Related