Mosh Mosh - 5 months ago 29
iOS Question

Bootstrap Modal does not work on iOS devices

I am working on a website using Bootstrap and have a problem I can't seem to fix. Here is the draft of the site.

On the "What We Do" panel, I made a clickable modal window on the first thumbnail box (it says "Enterprise Software development" under the thumbnail). If you click the thumbnail on a non-mobile device, a modal window will pop-up.

On a desktop computer (or laptop), it works just fine. But on a iOS (iPhone, iPad, etc.) it doesn't work at all: i.e. tapping it doesn't bring up the modal window.

However, if you look lower on the page at the "Who We are" panel, there is a "See more about Tim..." button. If you click or tap on that button, it will work across all devices (include iOS).

The only difference I can see between the two is that the first one is on a

<div>
tag, whereas the second one is on a
<button>
tag.

Does Bootstrap not support starting up a modal window from a
<div>
on an iOS device? If it does, do you see anything wrong with my code that would make it fail only on iOS devices?

Answer

Chris's answer is correct. Changing the div to a button would help clarify your markup. If, however, you need to keep the same markup, you can also add cursor: pointer to your div element to let safari know that this is something that might be clickable. It also let's mouse users have a standard visual cue that the element is clickable as well.

Just add the class clickable and then include the following CSS:

.clickable {
    cursor: pointer;
}

Here's an MCVE in Fiddle with the fix as well

notice I haven't used Bootstrap's btn classes here because they will add the cursor rule automatically.