Ajax 抛出错误时，弹出模式不会关闭

Question

我正在使用 Ajax 提交表单，然后通知用户。 我有 wait、success[=32 三种不同的弹出模式=] 和 error。 单击提交按钮时，等待模态提交表单时弹出。此后 success 或 error 模式弹出。问题是在出现 HTTP 错误时 wait 模态无法关闭，结果覆盖了 error 模态.我该如何解决？

<!-- Success Modal-->
        <div class="modal fade" id="notify" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ModalTitle">Success</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @{
                            string action = ViewContext.RouteData.Values["action"].ToString().ToLower();
                            if (action == "Create")
                            {
                                action = "created";
                            }
                            else
                            {
                                action = "updated";
                            }
                        }
                        Record has been successfully @action.
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="Close" data-dismiss="modal" onclick="closeModals()">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Error Modal-->
        <div class="modal fade" id="error" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header" id="error-header">
                        <h5 class="modal-title" id="ModalTitle">Error</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Failed to @ViewContext.RouteData.Values["action"].ToString().ToLower() record.
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="modalClose" data-dismiss="modal" class="CloseError" onclick="closeModals()">Close</button>
                    </div>
                </div>
            </div>
        </div>
    

        <!--Please Wait Modal-->
        <div class="modal fade" id="wait" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document" style="background-color: transparent; text-align: center; border-style: none;">
                <div class="modal-content" style="background-color: transparent; text-align: center;border-style:none;">
                    <div class="modal-body" style="background-color: transparent; text-align: center;border-style:none;">
                        <img id="waitImage" src="~/images/orderit_logo.png" height="100" width="100" />
                        <div style="color: #f9a51a;">
                            please wait...
                        </div>
    
                    </div>
                </div>
            </div>
        </div>  
 
       <script>        
            $("#Save").on("click", function (event) {
                $('#wait').modal('toggle');
                var formData = new FormData(document.getElementById("form"));
                $.ajax({
                    url: window.location.pathname,
                    type: 'POST',
                    data: formData,
                    success: function (data) {
                        $('#wait').modal('hide');
                        $('#notify').modal('toggle');

                    },
                    error: function (data) {
                        $('#wait').modal('hide');
                        $('#error').modal('toggle');
                    },
                    failure: function (data) {
                        $('#wait').modal('hide');
                        $('#error').modal('toggle');
                  
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
                return false;
            })

        });
        
    </script>

Answer 1

我通过使用填充整个页面并将其不透明度设置为 80% 的普通 div 解决了这个问题。

  <div id="wait">
        <img id="waitImage" src="~/images/orderit_logo.png" height="100" />
        <div style="color: #f9a51a; top: 65%; position: absolute; text-align:center;width:100%;">
            please wait...
        </div>
    </div>

#wait {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    background-color: rgba(19, 33, 106, 0.8); /*#f9a51a*/
    text-align: center;
    border-style: none;
    z-index: 3000;
    display:none;
}

then call:

  document.getElementById('wait').style.display = 'block';

or

  document.getElementById('wait').style.display = 'none';