24

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

是否有一个原因？在使用 Bootstrap 的 CSS via 时，有没有人想出解决这个问题的方法@import？

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

4

10 回答 10

21

这些天我遇到了同样的问题并发现，iOS 上的 safari 与其他浏览器在一件事情上的工作方式不同。模式窗口不会在 safari 上显示，但在许多其他浏览器上，当缺少 href="#" 时。

不适用于 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>
于 2015-09-11T14:05:43.097 回答
16

iPhone 的浏览器似乎不支持模态的“淡入淡出”过渡。从您的模态对话框中完全禁用它，或者如果您想要花哨，请仅在您的站点检测到 iPhone 设备时禁用它：

这在 iPhone 上不起作用

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

这确实

<div class="modal hide" id="deleteConfirmation">
于 2012-10-28T10:09:09.137 回答
6

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

于 2012-11-02T02:49:02.890 回答
4

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

将“可点击”类添加到您使用 iOS 设备点击的应该打开模式的任何内容。我假设您使用的是 div 因为标签或按钮应该可以正常工作。然后在你的 CSS 中放这个：

  .clickable {
     cursor:pointer;
  }

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

我不会把这个答案归功于我，我在这里找到了它： Bootstrap Modal does not work on iOS devices

于 2015-06-19T21:37:24.493 回答
1

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

于 2012-09-06T10:50:09.543 回答
0

这可能是由不正确的对话框定位引起的。尝试使用 .modal 类中的“顶部”设置。

于 2013-09-29T17:46:57.843 回答
0

非常简单，只需将内联样式“光标”添加到指针即可立即工作。style="cursor:pointer;"

<li><a data-toggle="modal" data-target="#testModal" style="cursor:pointer;">Modal</a></li>
于 2019-05-27T13:37:44.670 回答
0

如果您尝试在表单提交期间显示模式，那么您需要确保在提交事件之前激活模式。这是因为 iOS Safari 在表单提交期间不允许动画。

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

于 2020-10-21T16:18:52.797 回答
0

我也有同样的问题，我的触发 Modal 的按钮在 iPhone 上不起作用。<a>我必须用 Rails转换标签link_to并提供所有可能的属性。IE。， 

= link_to "Open Modal", '#', :remote => true, "data-backdrop" => "modal-backdrop", "data-toggle" => "modal", "data-target" => "#myModal"
于 2018-10-29T09:35:08.633 回答
0

我在我的移动设备（Android 操作系统）上遇到了类似的错误。模态在桌面上工作正常，但在移动设备上不起作用。

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

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

于 2015-09-11T14:00:07.793 回答