24

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.

alex
  • 6,818
  • 9
  • 52
  • 103
Richlewis
  • 15,070
  • 37
  • 122
  • 283
  • It's really buggy for me in Firefox on Android 2.3. It's also a PITA in Google Chrome desktop while the developer tools are docked and open. You really should file a bug report at github if you can produce a test case. When you say "don't work", do you mean that *nothing* happens? – Wesley Murch Jul 15 '12 at 18:54
  • well one of my modals open but its as if it is set to the back of the screen and the rest just dont open – Richlewis Jul 15 '12 at 19:09
  • Same here, doesn't work on the iphone. The screen goes black ( dimmed ) but you can't see the modal, tapping the screen a couple of times gets back to standard view. This is happening at a very early development stage, no custom CSS yet, so it's BS as is, more or less – PatrickS Jul 28 '12 at 09:26
  • what do you mean by BS? Any suggestions as I already know how it behaves on an iphone.Thanks – Richlewis Jul 29 '12 at 17:15
  • 1
    @PatrickS Does this address the issue? http://stackoverflow.com/a/12084582/570918 – merv Aug 26 '12 at 19:22
  • Here is the solution https://github.com/twitter/bootstrap/issues/2130#issuecomment-5782845 – msroot Oct 05 '12 at 15:27
  • Updated link: https://github.com/twbs/bootstrap/issues/2130#issuecomment-5782845 – rakslice Aug 06 '13 at 21:49
  • Richlewis: By "it's BS" I'm pretty sure @PatrickS means "it's BootStrap". I don't think he intended to imply your question was that phrase often abbreviated as "BS". :-) – Mark Meuer Mar 04 '14 at 19:50

10 Answers10

21

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>
Navnish Bhardwaj
  • 1,687
  • 25
  • 39
  • 1
    This answer seems copied from this one: https://stackoverflow.com/a/28792552/162049 - Maybe it could be kind to cite the source – Marco Panichi Jun 22 '17 at 08:10
17

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">
Andreas Louv
  • 46,145
  • 13
  • 104
  • 123
Ben
  • 197
  • 1
  • 3
6

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

Yohn
  • 2,519
  • 19
  • 23
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

Community
  • 1
  • 1
John
  • 473
  • 5
  • 20
1

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

Lloyd
  • 8,204
  • 2
  • 38
  • 53
0

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

danzelisko
  • 1
  • 1
0

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.

Lecha
  • 26
  • 3
0

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

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>
flochristos
  • 73
  • 3
  • 13
0

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.

carlin.scott
  • 6,214
  • 3
  • 30
  • 35