Bootstrap Safari/iOS/iPhone 模式问题

Question

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>

https://jsfiddle.net/mmbtfhaf/

Answer 1

这些天我遇到了同样的问题并发现，iOS 上的 safari 在一件事上与其他浏览器的工作方式不同。当缺少 href="#" 时，模态 window 不会在 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

如果您将 'a' 标记改为 'button'，它在 Safari IOS 和桌面浏览器中均有效。

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

Answer 3

我找到了解决我问题的答案。问题是 iOs 没有意识到标签是可点击的。

创建CSS样式如下：

.clickable {
    cursor: pointer;
}

在您的模态代码中，添加可点击的 class:

<li><a data-toggle="modal" class="clickable" data-target="#modalDelete">Delete</a></li>

Answer 4

将 transition: all .3s ease; 更改为 transition: opacity .3s ease, transform .3s ease; 这解决了我的问题。

Bootstrap Safari/iOS/iPhone 模式问题

Bootstrap modal issue on Safari/iOS/iPhone

css

iphone

mobile-safari

twitter-bootstrap