Safari/iOS/iPhone上的Bootstrap模式问题

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 ="#"的情况下,模拟窗口不会在safari上显示,而是在许多其他浏览器上显示.

不在Safari/iOS上工作,但在其他浏览器上工作:

__CODE__

在Safari/iOS和其他浏览器上工作:

__CODE__

Answer 2

我发现这个答案解决了我的问题.问题是iOs没有意识到标签是可点击的.

创建CSS样式如下:

.clickable {
    cursor: pointer;
}

在您的模态代码中,添加可点击的类:

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