CSS Bootstrap 模式在 iPhone 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11494613/
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 doesn't work on iPhone
提问by Richlewis
I'm using a Bootstrap modal dialog on my site (which works fine on desktop). When I try to use this function on iPhones and iPads, the modals do not work.
我在我的网站上使用 Bootstrap 模式对话框（在桌面上工作正常）。当我尝试在 iPhone 和 iPad 上使用此功能时，模态不起作用。
Is there a reason for this? Has anyone come up with a fix for this whilst using Bootstrap's CSS via @import?
是否有一个原因？有没有人在使用 Bootstrap 的 CSS 时提出解决方案@import？
I use the Bootstrap override file to make changes to the Bootstrap CSS.
我使用 Bootstrap 覆盖文件对 Bootstrap CSS 进行更改。
回答by Navnish Bhardwaj
I had the same problem these days and figured out, that safari on iOS is working differently to other browsers with respect to one thing. The modal window is not shown on safari but on many other browsers, when there is a href="#" missing.
这些天我遇到了同样的问题，并发现 iOS 上的 safari 在某一件事上与其他浏览器的工作方式不同。当缺少 href="#" 时，模式窗口不会在 safari 上显示，而是在许多其他浏览器上显示。
not working on Safari/iOS but other browsers:
不适用于 Safari/iOS，但适用于其他浏览器：
<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>
working on Safari/iOS and other browsers:
在 Safari/iOS 和其他浏览器上工作：
<li><a href="#" data-toggle="modal" data-target="#testModal">Modal</a></li>
回答by Ben
The iPhone's browser doesn't seem to support the modal's "fade" transition. Disable it entirely from your modal dialog box, or if you want to get fancy, disable only when your site detects an iPhone device:
iPhone 的浏览器似乎不支持模态的“淡入淡出”过渡。从你的模态对话框中完全禁用它，或者如果你想花哨的话，只在你的站点检测到 iPhone 设备时禁用它：
This doesn't work on the iPhone
这在 iPhone 上不起作用
<div class="modal hide fade" id="deleteConfirmation">
This does
这确实
<div class="modal hide" id="deleteConfirmation">
回答by Yohn
please check out http://jschr.github.com/bootstrap-modal/as it fixes a bunch of the modal issues.. all you'll have to do is just include the 2 js files --
- bootstrap-modalmanager.js
- js/bootstrap-modal.js
and it just works
请查看http://jschr.github.com/bootstrap-modal/因为它修复了一堆模态问题.. 你所要做的就是包含 2 个 js 文件
-- bootstrap-modalmanager.js
- js/bootstrap-modal.js
就可以了
回答by John
I know I'm a little late to this party but I was having the same problem and came across a solution that solved it. In case anyone else is having the same problem and finds this question doing a search here is the answer:
我知道我参加这个聚会有点晚了，但我遇到了同样的问题，并找到了解决它的解决方案。万一其他人遇到同样的问题并在此处进行搜索时发现此问题就是答案：
Add the class "clickable" to whatever you're tapping on with your iOS device that's supposed to open the modal. I assume you're using a div because an a tag or button should work just fine. Then in your CSS put this:
将“可点击”类添加到您使用应该打开模态的 iOS 设备点击的任何内容中。我假设您使用的是 div，因为标签或按钮应该可以正常工作。然后在你的 CSS 中输入：
.clickable {
cursor:pointer;
}
This is not a Bootstrap problem, it's an iOS problem. The pointer lets iOS know that whatever you're tapping on is clickable, which normally doesn't include a div.
这不是 Bootstrap 的问题，而是 iOS 的问题。指针让 iOS 知道您点击的任何内容都是可点击的，通常不包含 div。
I won't take credit for this answer, I found it here: Bootstrap Modal does not work on iOS devices
我不会相信这个答案，我在这里找到了它： Bootstrap Modal 在 iOS 设备上不起作用
回答by Lloyd
this is still an open issue on the Bootstrap Project: https://github.com/twitter/bootstrap/issues/2130
这仍然是 Bootstrap 项目的一个悬而未决的问题：https: //github.com/twitter/bootstrap/issues/2130
回答by danzelisko
This may be caused by incorrect dialog positioning. try playing with the "top" setting in the .modal class.
这可能是由错误的对话框定位引起的。尝试使用 .modal 类中的“top”设置。
回答by Lecha
I had similar error on my mobile device (Android OS). Modal works fine on desktop but on mobile doesn't work.
我在我的移动设备（Android 操作系统）上遇到了类似的错误。Modal 在桌面上运行良好，但在移动设备上不起作用。
Problem was in my wrong definition of grid layout.
问题在于我对网格布局的错误定义。
So, define .col-xsin any column of your layout, that worked for me.
因此，在布局的任何列中定义.col-xs，这对我有用。
回答by Hussain Akram
I also had the same problem where my button to trigger Modal was not working on iPhone. I had to convert the <a>tag with Rails link_toand providing all possible attributes. ie.,
我也遇到了同样的问题，我触发 Modal 的按钮在 iPhone 上不起作用。我必须<a>使用 Rails转换标签link_to并提供所有可能的属性。IE。，
= link_to "Open Modal", '#', :remote => true, "data-backdrop" => "modal-backdrop", "data-toggle" => "modal", "data-target" => "#myModal"
回答by flochristos
Very easy, just add the an inline style, "cursor" to pointer and it will work straight away. style="cursor:pointer;"
非常简单，只需将内联样式“光标”添加到指针，它就会立即起作用。 style="cursor:pointer;"
<li><a data-toggle="modal" data-target="#testModal" style="cursor:pointer;">Modal</a></li>
