Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 980
Moshe Avatar asked Aug 17 '14 23:08

Moshe


People also ask

Do Bootstrap modals work on mobile?

Bootstrap modals don't work correctly on Android and iOS. The issue tracker acknowledges the problem but does not offer a working solution: Modals in 2.0 are broken on mobile. The screen darkens but the modal itself is not visible in the viewport.

Are Bootstrap modals accessible?

Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.

Is Bootstrap modal responsive?

Bootstrap 5 Modal component. Responsive popup window with Bootstrap 5. Examples of with image, modal position i.e. center, z-index usage, modal fade animation, backdrop usage, modal size & more. Modal is a responsive popup used to display extra content.

How do I manually open Bootstrap modals?

Answer: Use the modal('show') Method You can simply use the modal('show') method to show or open the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('hide') and modal('toggle') .


2 Answers

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.

like image 124
KyleMit Avatar answered Sep 20 '22 05:09

KyleMit


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.

like image 45
cvrebert Avatar answered Sep 20 '22 05:09

cvrebert