如何使用Ajax隐藏错误条件的模态?

如下图所示,出现了我的错误模态,但是前面的模态没有隐藏。我已经写好了先隐藏上传模式进度的顺序,然后是错误模式。

按错误顺序排列:

  1. 隐藏上传进度模式(带圆圈的灰色框)
  2. 显示错误模式(红色框)

如何使用Ajax隐藏错误条件的模态?

HTML

<div class="modal fade" id="error-upload" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content bg-danger text-white">
            <div class="modal-body text-center">
                <h3 class="text-white mb-15"><i class="fa fa-exclamation-triangle"></i> ERROR!</h3>
                <span>Upload Failed.</span>
                <p>Filename already exist.</p>
                <p></p>
                <button type="button" class="btn btn-light" data-dismiss="modal">Ok</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="uploading-modal" tabindex="-1" role="dialog" aria-labelledby="uploadingLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="loader"></div>
                <div class="loader-txt">
                    <p>Please wait while file is Uploading.</p>
                </div>
            </div>
        </div>
    </div>
</div>

JS

$("#btnYes").on("click",function(e){
    e.preventDefault();
    $.ajax({
        url: 'example.com'
        type: 'POST',data: fd,xhrFields: {
            withCredentials: true
            },contentType: false,processData: false,beforeSend: function(){
            $("#uploading-modal").modal({
                backdrop: "static",//remove ability to close modal with click
                keyboard: false,//remove option to close with keyboard
                show: true //Display loader!
            });
        },success: function(response){
            console.log(response);
            if(response != 0){
                $('#success-modal').modal('show');
            }else{
                alert('File Format Not Supported');
            }
            $("#uploading-modal").modal("hide");
        },error: function(e){
            console.log(e);
            $("#uploading-modal").modal("hide");
            $("#error-upload").modal('show');
        },});
});
uhkul 回答:如何使用Ajax隐藏错误条件的模态?

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3129131.html

大家都在问