Bootstrap Modal 在 Chrome 中不起作用

Question

All,

I'm having an issue with bootstrap 3 modal not working properly in Chrome or Edge. The modal works fine in FireFox. Note! The modal does eventually display for a split second before the second modal "message" is displayed (which works fine in all browsers).

Here is the HTML for the modal:

<!-- 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>

What is supposed to happen is that when an ajax call fires the spinner modal should be displayed while the web service is running. It should stay on the screen until the complete event runs. Here is the complete listing of the ajax call. In all instances the web service runs fine and returns a JSON string.

// 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");
        }
    });

Answer 1

Remove "fade" from the class list. i have no idea why it doesn't work with fade but that fixed it for me.