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?
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.
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.
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.
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') .
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;
}
notice I haven't used Bootstrap's btn
classes here because they will add the cursor
rule automatically.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With