javascript - 如何在 AJAX 成功时以编程方式关闭 Bootstrap 3 模式？

Question

我有一个代码，我想做的是在 ajax 成功时关闭模态。这是我的代码:

脚本

success: function() {
    console.log("delete success");
    $('#deleteContactModal').modal('hide');
    $( "#loadContacts" ).load( "/main/loadContacts" );

}

html

<div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
<!--everything goes here -->
    </div>
  </div>
</div>

一切正常，除了当代码 $('#deleteContactModal').modal('hide'); 触发时，它只显示黑色褪色屏幕，如下所示:

模态窗口关闭但黑色褪色仍然存在。我在这里错过了什么吗？提前谢谢你。

我正在使用 bootstrap 3.3。

Answer 1

尝试将此属性添加到您的模态 div aria-hidden="true"

例如:

<div aria-hidden="true" class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

这是我的工作示例

<div class="modal fade" id="copy_course_modal" tabindex="-1" role="dialog" aria-labelledby="copycourse" aria-hidden="true">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="purchaseLabel">Copy Chapter</h4>
                </div>
                <div class="modal-body">
                Modal body content here
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveCopiedCourse()">Copy Course</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
</div> 

并成功完成同样的操作。

$("#copy_course_modal").modal('hide');