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>
这些天我遇到了同样的问题,并且发现,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>
我发现这个答案解决了我的问题。问题是iOs没有意识到标签是可点击的。
创建CSS样式如下:
.clickable {
cursor: pointer;
}
在您的模态代码中,添加可点击的类:
<li><a data-toggle="modal" class="clickable" data-target="#modalDelete">Delete</a></li>
如果你将“a”标签改为“按钮”,它可以在safari IOS和桌面浏览器中使用。
<li><button data-toggle="modal" data-target="#testModal">Modal</button></li>