Safari/iOS/iPhone 上的引导模式问题

Posted 2023-05-07

【中文标题】Safari/iOS/iPhone 上的引导模式问题

【英文标题】：Bootstrap modal issue on Safari/iOS/iPhone

【发布时间】：2015-04-30 14:44:56

【问题描述】：

引导模式淡入淡出在 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/

【问题讨论】：

您能否发布您用于模态的代码并描述在 safari 中不起作用的代码？

【参考方案1】：

这些天我遇到了同样的问题，并且发现，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>

【讨论】：

谢谢你的回答，但我不是创建模态，而是使用预制模态div，所以我只是用模态代码调用效果。

@vinoli 你的问题解决了吗？我对用 jquery 调用的模态 div 也有同样的问题，这个答案没有解决它，因为我没有任何 href

@z3d0 您好，您的问题解决了吗？我有同样的问题，我无法解决！

@Brian-Vanegas-Parra 不幸的是我还没有解决它

你拯救了我的一天！

【参考方案2】：

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

按如下方式创建 CSS 样式：

.clickable 
    cursor: pointer;

在您的模态代码中，添加可点击类：

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

【讨论】：

谢谢你，帕姆，这解决了我的 Bootstrap 4 标签问题。

【参考方案3】：

如果您将“a”标签改为“按钮”，则它可以在 Safari IOS 和桌面浏览器中使用。

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

【讨论】：

此解决方案有时会在 html 验证器中引发警告，因此使用风险自负。如需替代方案，请查看 Pam Nelligan 的回答。

【参考方案4】：

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