Html Bootstrap Modal 在 iOS 设备上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25354536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal does not work on iOS devices
提问by Moshe
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.
我正在使用 Bootstrap 开发一个网站，但遇到了一个我似乎无法解决的问题。这是网站的草稿。
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.
在台式电脑（或笔记本电脑）上，它工作得很好。但是在 iOS（iPhone、iPad 等）上它根本不起作用：即点击它不会打开模态窗口。
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 tapon that button, it will work across all devices (include iOS).
但是，如果您在“我们是谁”面板的页面下方查看，则会有一个“查看更多关于蒂姆...”按钮。如果您单击或点击该按钮，它将适用于所有设备（包括 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.
我能看到两者之间的唯一区别是第一个在<div>标签上，而第二个在<button>标签上。
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 不支持从<div>iOS 设备上的a 启动模态窗口吗？如果是这样，您是否发现我的代码有任何问题会使其仅在 iOS 设备上失败？
回答by KyleMit
Chris's answer is correct. Changing the divto a buttonwould help clarify your markup. If, however, you need to keep the same markup, you can also add cursor: pointerto 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.
克里斯的回答是正确的。将 更改div为 abutton将有助于澄清您的标记。但是，如果您需要保持相同的标记，您还可以添加cursor: pointer到您的 div 元素，让 safari 知道这可能是可点击的。它还让鼠标用户有一个标准的视觉提示，即元素也可点击。
Just add the class clickableand then include the following CSS:
只需添加该类clickable，然后包含以下 CSS：
.clickable {
cursor: pointer;
}
Here's an MCVE in Fiddle with the fix as well
这是 Fiddle 中的 MCVE 以及修复程序
notice I haven't used Bootstrap's btnclasses here because they will add the cursorrule automatically.
注意我btn在这里没有使用 Bootstrap 的类，因为它们会cursor自动添加规则。
回答by cvrebert
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/134and 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.
这根本不是 Bootstrap 特有的，它是 iOS 上的一个普遍问题。默认情况下，许多不常用的交互元素（例如<div>s）在 iOS 上不可点击/点击。
有关更多详细信息，请参阅https://github.com/facebook/react/issues/134以及其中的链接和跟进。
如果可能，请使用<button>或<a>代替。<div>无论如何，交互元素的A在语义上不是很合适。
