Bootstrap Modal在iOS设备上无法使用 [英] Bootstrap Modal does not work on iOS devices

问题描述

我在使用Bootstrap的网站上工作，遇到了一个我似乎无法解决的问题。这里是网站的草稿。

在什么我们做面板，我在第一个缩略图框（它在缩略图下面写着企业软件开发）创建了一个可点击的模式窗口。如果您点击非移动设备上的缩略图，则会弹出一个模式窗口。

在台式电脑（或笔记本电脑）上，它工作得很好。但在iOS（iPhone，iPad等）上它根本不起作用：即点击它不会显示模式窗口。

但是，如果您在我们是谁面板的页面上看起来较低，有一个查看更多关于Tim ...的按钮。如果您在该按钮上点击或点击，它将适用于所有设备（包括iOS）。

两者之间唯一的区别在于，第一个区别在于< div> 标记，而第二个是在< button> 标记上。

Bootstrap不支持启动模式窗口从iOS设备上的< div> ？如果是这样，你看到我的代码有什么问题，只会在iOS设备上失败吗？

正确。将 div 更改为按钮将有助于澄清您的标记。但是，如果您需要保留相同的标记，您还可以向您的div元素添加 cursor：pointer ，以让safari知道这可能是可点击的。它也让我们的鼠标用户有一个标准的视觉提示，该元素也是可点击的。

只需添加类可点击的，然后添加以下CSS：

  .clickable {
 cursor：pointer; 
} 
  

>这里有一个修改的小提琴中的MCVE

^{通知我没有使用Bootstrap的 btn 类，因为它们会自动添加游标规则。}

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?

解决方案

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

这篇关于Bootstrap Modal在iOS设备上无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！