Question

我在我的网站上使用Bootstrap模式对话框（在桌面上工作正常）。当我尝试在iPhone和iPad上使用此功能时，模态不起作用。

这有什么理由吗？有人通过@import使用Bootstrap的CSS来解决这个问题吗？

我使用Bootstrap覆盖文件来更改Bootstrap CSS。

Answer 1

这些天我遇到了同样的问题并且发现，iOS上的Safari与其他浏览器的工作方式不同。在缺少href =“＃”时，模式窗口不会在safari上显示，但会在许多其他浏览器上显示。

不在Safari / iOS上工作，但在其他浏览器上工作：

<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>

在Safari / iOS和其他浏览器上工作：

<li><a href="#" data-toggle="modal" data-target="#testModal">Modal</a></li>

Answer 2

iPhone的浏览器似乎不支持模态的“淡入淡出”过渡。完全从模态对话框中禁用它，或者如果您想获得幻想，只有当您的站点检测到iPhone设备时才禁用它：

这不适用于iPhone

<div class="modal hide fade" id="deleteConfirmation">

这样做

<div class="modal hide" id="deleteConfirmation">

Answer 3

请查看http://jschr.github.com/bootstrap-modal/因为它修复了一堆模态问题..所有你需要做的只是包含2个js文件 -
- bootstrap-modalmanager.js
- js / bootstrap-modal.js
它只是工作

Answer 4

我知道我这次聚会有点晚了，但我遇到了同样的问题，遇到了解决问题的解决方案。如果其他人遇到同样的问题并且发现这个问题在这里进行搜索就是答案：

添加课程＆＃34;可点击＆＃34;无论您使用iOS设备进行哪些操作都应该打开模式。我假设您正在使用div，因为标签或按钮应该可以正常工作。然后在你的CSS中输入：

  .clickable {
     cursor:pointer;
  }

这不是Bootstrap问题，而是iOS问题。指针让iOS知道您点击的任何内容都是可点击的，通常不会包含div。

我对这个答案不予理睬，我在这里找到了： Bootstrap Modal does not work on iOS devices

Answer 5

这仍然是Bootstrap项目的一个悬而未决的问题： https://github.com/twitter/bootstrap/issues/2130

Answer 6

这可能是由于对话框定位不正确造成的。尝试使用.modal类中的“top”设置。

Answer 7

我的移动设备（Android操作系统）上出现了类似的错误。 Modal在桌面上运行良好，但在移动设备上无法正常工作。

问题在于我对网格布局的错误定义。

因此，在布局的任何列中定义 .col-xs ，这对我有用。

Answer 8

我也遇到同样的问题，我的触发Modal的按钮在iPhone上不起作用。我必须使用Rails %% my comment is not highlighted来转换<a>标签，并提供所有可能的属性。即

link_to

Answer 9

非常容易，只需将内联样式“光标”添加到指针，它将立即起作用。 style="cursor:pointer;"

<li><a data-toggle="modal" data-target="#testModal" style="cursor:pointer;">Modal</a></li>

Answer 10

如果您要在表单提交过程中显示模式，则需要确保在提交事件之前激活模式。这是因为iOS Safari不允许在表单提交过程中播放动画。

在jquery验证完成后，我正在显示我的模态，为时已晚。因此，我改为在按钮单击时显示模式，并在提交事件期间jQuery验证失败时将其关闭。