javascript - 引导模式在 Chrome 中不起作用

问题描述

全部，

我遇到了 bootstrap 3 modal 在 Chrome 或 Edge 中无法正常工作的问题。该模式在 FireFox 中运行良好。笔记！在显示第二个模态“消息”之前，模态最终会显示一瞬间（在所有浏览器中都可以正常工作）。

这是模式的 HTML：

<!-- Spinner modal -->
    <div class="modal fade" id="spinner" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Processing</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <p>Your payment is being processed. Please do not close your browser window or click the back button. Doing so may incurr multiple charges.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <img src="../images/icons/spinner.gif" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>

应该发生的是，当 ajax 调用触发时，微调器模式应该在 Web 服务运行时显示。它应该保持在屏幕上，直到完整的事件运行。这是 ajax 调用的完整列表。在所有情况下，Web 服务都运行良好并返回 JSON 字符串。

// Record the payment
    jQuery.ajax({
        type: "POST",
        async: false,
        url: "/payments.asmx/ProcessPayment",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
            _paymentRecord: payment
        }),
        dataType: "json",
        "beforeSend": function () {
            // Display the wait graphic
            $("#spinner").modal("show");
        },
        "success": function (data) {
            // some code goes here which was removed to make the listing readable
        },
        "error": function (jqXHR, textStatus, errorThrown) {
            alert("Error executing web service: " + jqXHR.responseText);
        },
        "complete": function () {
            // Hide the spinner modal
            $("#spinner").modal("hide");
        }
    });

标签： javascriptjquerytwitter-bootstrap-3

javascript - 引导模式在 Chrome 中不起作用

问题描述

解决方案

推荐阅读