如何在AJAX成功的情况下以编程方式关闭Bootstrap 3模式? [英] How to close Bootstrap 3 modal programmatically on AJAX success?

问题描述

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

I have a code that what I wanted to do is to close the modal on ajax success. This is my code:

脚本

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');触发时，它仅显示黑色的褪色屏幕，如下所示:

Everything just works except when the code $('#deleteContactModal').modal('hide'); triggers, it just shows a black faded screen like this:

模态关闭，但黑色褪色仍然存在.我在这里想念什么吗?预先谢谢你.

The modal closes but the black faded color is still present. Am I missing something here? Thank you in advance.

我正在使用 bootstrap 3.3 .

推荐答案

尝试向您的模式div aria-hidden="true"

try to add this attribute with your modal 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');

这篇关于如何在AJAX成功的情况下以编程方式关闭Bootstrap 3模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！