Question

我们有一个场景，当点击我们网站上的特定按钮时，处理需要10秒钟左右 - 不幸的是，我们在短期内没有做太多的事情，因为它是时候了将数据写入Dynamics CRM需要它。

作为一个短期解决方案，我们希望展示一个引导模式，提醒用户某些事情仍在发生......呃。它的处理。我们认为我们会在大约1或2秒后显示模态，这样如果过程快速完成，用户甚至不会看到模态，如果它很慢的话。

因此，我们从HTML中的按钮开始：

<input type="submit" value="Continue" class="link-button large-plus-link-button primary" data-toggle-processing-modal="true"/>

模式本身在哪个下面：

<div id="processingModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-blogpost-label" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            Loading...
        </div>
    </div>
</div>

然后我们有一个javascript函数来显示模态：

    $("[data-toggle-processing-modal='true']").on('click', function(e) {

    setTimeout(function () {
        $('#processingModal').modal('show');
    }, 1000);

})

这适用于我们目前为止测试的所有桌面浏览器以及Android的移动版本，但是模式在IOS设备上根本没有显示。我认为这与页面已经开始提交的事实有关，我认为这是因为如果我通过在javascript函数中添加e.preventDefault（）来阻止页面提交，它就可以了！但是，页面当然没有提交！

我绞尽脑汁，但我似乎无法想办法解决这个问题 - 有人能提出任何想法吗？

提前致谢亲切的问候， dotdev

Bootstrap模式未显示在提交按钮上单击IOS

0 个答案: