CSS Safari/iOS/iPhone 上的 Bootstrap 模式问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28772684/
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 issue on Safari/iOS/iPhone
提问by vinoli
Bootstrap modal fade is working perfectly on Chrome/Internet Explorer, but it doesn't work on the iPhone/Safari. Does someone a solution for this issue?
Bootstrap 模式淡入淡出在 Chrome/Internet Explorer 上运行良好，但在 iPhone/Safari 上不起作用。有人解决了这个问题吗？
<div class="modal fade" id="notice" tabindex="-1" role="dialog" aria-labelledby="notice" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="https://random.hellyer.kiwi/files/2013/11/wiley-coyote-help.jpg" />
| wait, I'm updating...
</div>
</div>
</div>
</div>
<script>
$('#notice').modal('show');
setTimeout(function () {
$('#notice').modal('hide');
}, 3000);
</script>
回答by rene2
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 Pam Nelligan
I found this answer that solved the problem for me. The problem is that iOs doesn't realize that the tag is clickable.
我发现这个答案为我解决了这个问题。问题是 iOs 没有意识到标签是可点击的。
Create a CSS style as follows:
创建一个 CSS 样式如下：
.clickable {
cursor: pointer;
}
In your modal code, add the clickable class:
在您的模态代码中，添加 clickable 类：
<li><a data-toggle="modal" class="clickable" data-target="#modalDelete">Delete</a></li>
回答by Graahf
If you make the 'a' tag an 'button' instead, it's working in both safari IOS and desktop browsers.
如果您将“a”标签改为“按钮”，则它可以在 Safari IOS 和桌面浏览器中使用。
<li><button data-toggle="modal" data-target="#testModal">Modal</button></li>
回答by Shankar Kanase
Change transition: all .3s ease;to transition: opacity .3s ease, transform .3s ease;this fixed my issue.
更改transition: all .3s ease;到transition: opacity .3s ease, transform .3s ease;这个固定我的问题。
