Jquery 模式隐藏后，显示AJAX响应时，模式屏幕保持黑色

下面是HTML代码。当我点击Upload Building时，会弹出以下文件选择模式。一旦用户选择了一个文件并单击模式上的upload按钮，模式应该关闭，发送一个AJAX查询，然后用HTML响应替换upload按钮

# HTML Code
<div class="container-fluid mx-auto">
    <div class="row mainbox" id="input">
        <div class="col-sm-5">
            <button type="button" class="btn btn-secondary btn-sm btn-block" id="btn-upload-file" data-toggle="modal" data-target="#mdl-upload-file">Upload Building</button>
        </div>
    </div>
</div>
<div class="modal fade" id="mdl-upload-file" tabindex="-1" role="dialog" aria-labelledby="uploadFileModal" 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="uploadFileModal">Upload Building Config</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="customFile" accept="application/JSON">
                    <label class="custom-file-label">Choose file...</label>
                    <small id="uploadHelp" class="form-text text-muted">Please upload a valid building configuration JSON file.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btn-upload-selected-file">Upload File</button>
            </div>
        </div>
    </div>
</div>

现在，当我使用alert而不是jQuery（'.mainbox'）.html（response）时，模式成功关闭。然而，当我试图显示响应时，模态的黑屏并没有消失。我尝试了针对堆栈溢出提供的多种解决方案（如下所示），但没有一种适合我：

$（'mdl上传文件'）.hide（）

$（“#mdl上载文件”）.remove（）

将超时设置为5000

$（'modalElement'）。数据（'modal'，null）

---

请帮忙

只需将

数据

添加到您的

[上传文件]

按钮：

上传文件

然后去掉冗余的

$（'#mdl upload file'）.modal（'hide'）

。这是坏习惯。相反，您可以在用户选择文件之前阻止用户单击

[Upload File]

$（'#customFile'）。在（'change'，function（）上{
如果（this.files.length>0）$（“#btn上载所选文件”）.removeAttr（'disabled'））
})

---

还向

[上传文件]

添加了

禁用的
属性。
您需要调用引导的模式隐藏功能<代码>$（“#mdl上载文件”）.modal（“隐藏”）我在点击按钮时调用它，查看javascript代码看看这是否有助于我尝试
$（'#modalElement'）。数据（'modal'，null）但它不起作用。这不是页面上唯一的解决方案。。。
jQuery('#btn-upload-selected-file').on('click', function() {
    $('#mdl-upload-file').modal('hide');
    if (validBuildingFile) {
        fileObj['build_type'] = 'upload';
        jQuery.ajax({
            type: "POST",
            url: "/build",
            data: JSON.stringify(fileObj),
            dataType : "html",
            contentType: "application/json",
            success: function(response) {
                jQuery('.mainbox').html(response);
            },
            error: function() {
                alert(response);
            }
        });
    }
});