Bootstrap Modal 在 iOS 设备上不起作用

问题描述

我正在使用 Bootstrap 开发一个网站，但遇到了一个我似乎无法解决的问题.这是网站草稿.

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.

在台式计算机(或笔记本电脑)上，它工作得很好.但在 iOS(iPhone、iPad 等)上，它根本不起作用:即点击它不会调出模态窗口.

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.

但是，如果您在我们是谁"面板中向下看页面，则会出现查看更多关于蒂姆..."的按钮.如果您在该按钮上单击或点击，它将适用于所有设备(包括 iOS).

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).

我可以看到两者之间的唯一区别是第一个在 <div> 标签上，而第二个在 <button> 标签.

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.

Bootstrap 不支持从 iOS 设备上的 <div> 启动模式窗口吗?如果是这样，您是否发现我的代码有什么问题会导致它仅在 iOS 设备上失败?

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?

推荐答案

克里斯的回答是正确的.将 div 更改为 button 将有助于澄清您的标记.但是，如果您需要保持相同的标记，您还可以将 cursor:pointer 添加到您的 div 元素中，让 safari 知道这是可以点击的东西.它还让鼠标用户有一个标准的视觉提示，该元素也是可点击的.

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.

只需添加类clickable，然后包含以下CSS:

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

.clickable {
    cursor: pointer;
}

这也是 Fiddle 中的 MCVE 以及修复

^{注意我这里没有使用 Bootstrap 的 btn 类，因为它们会自动添加 cursor 规则.}

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.}

这篇关于Bootstrap Modal 在 iOS 设备上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！