CODEWITHSUNDEEP
htmliostwitter-bootstrapmodal-dialog
Moshe
Moshe

Reputation: 353

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?

Upvotes: 15

Views: 37787

Answers (2)

KyleMit
KyleMit

Reputation: 30387

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.

Upvotes: 33

cvrebert
cvrebert

Reputation: 9289

This isn't Bootstrap-specific at all, it's a general problem on iOS. By default, many not-usually-interactive elements (such as <div>s) aren't clickable/tappable on iOS.
See https://github.com/facebook/react/issues/134 and the links & follow-ups therein for some more details.
If possible, use a <button> or <a> instead. A <div> for an interactive element isn't very semantically appropriate anyway.

Upvotes: 11

Related Questions