CODEWITHSUNDEEP
csstwitter-bootstrap
Richlewis
Richlewis

Reputation: 15394

Bootstrap modal doesn't work on iPhone

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.

Upvotes: 24

Views: 43998

Answers (11)

Yohn
Yohn

Reputation: 2559

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

Edit: This was from an old post many many years ago, for Bootstrap V3. The updated URL is as follow: http://jschr.github.io/bootstrap-modal/

Upvotes: 6

kirilinko
kirilinko

Reputation: 1

If you want to display the modal in a DataTable, simply remove the modal from the DataTable and place it elsewhere in your code.

Upvotes: 0

carlin.scott
carlin.scott

Reputation: 7345

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.

Upvotes: 0

flochristos
flochristos

Reputation: 75

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>

Upvotes: 0

user5415898
user5415898

Reputation:

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"

Upvotes: 0

Navnish Bhardwaj
Navnish Bhardwaj

Reputation: 1718

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><a href="#" data-toggle="modal" data-target="#testModal">Modal</a></li>

Upvotes: 21

Lecha
Lecha

Reputation: 26

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.

Upvotes: 0

John
John

Reputation: 473

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

Upvotes: 4

danzelisko
danzelisko

Reputation: 1

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

Upvotes: 0

Ben
Ben

Reputation: 197

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">

Upvotes: 17

Lloyd
Lloyd

Reputation: 8416

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

Upvotes: 1

Related Questions