Javascript 如何在AJAX成功时以编程方式关闭Bootstrap3模式？

我有一个代码，我想做的是关闭ajax成功的模式。这是我的代码：

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

脚本

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

}

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

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>

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

除了代码

$（'deleteContactModal'）.modal（'hide'）触发器，它只是显示一个黑色褪色的屏幕，如下所示：

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();


 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

模态关闭，但黑色褪色的颜色仍然存在。我是不是遗漏了什么？先谢谢你

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

我使用的是引导程序3.3
尝试在模态div中添加此属性
aria hidden=“true”

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

例如：

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

尝试：

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

这将隐藏当前激活的模式。
我也有同样的问题，我能找到的唯一工作方法是单独删除模式生成的部分。只需将此函数放在您的js中，并在html或js中的按钮上创建onclick事件。希望我能帮忙

function hideModal(){
  $(".modal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $(".modal").hide();
}

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

查找此链接

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();


 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

它给出了有关模型窗口的详细信息
我自己在类似情况下遇到了这个问题

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

这似乎与javascript+引导动画的异步性质有关

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

这是一个肮脏的、肮脏的黑客行为，但在超时时将调用包装为“隐藏”对我来说是可行的：

setTimeout( function(){$("#myModal").modal('hide')}, 300 );

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

如果使用此“解决方案”解决问题，则可能需要调整超时值。引导动画似乎需要125-200毫秒，所以300提供了一个很好的安全缓冲。
简单的编程方式单击对话框的关闭按钮

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

$（“按钮[数据释放=\“模式\]”）。单击（）

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

这将自动关闭对话框。
这只是一个计时问题。淡入淡出动画需要时间，javascript无法关闭它。只要取消淡入淡出动画，它就能正常工作

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();


...

（不使用class=“modal fade”，jus class=“modal”）
我尝试了几种建议的解决方案，唯一对我有效的是：

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

$（“.modal.in”）.modal（'hide'）

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

一些人确实清除了模态和背景，但随后它没有在屏幕上重新显示
后续调用。
除了说“不要使用模式淡入淡出”的选项之外，这些选项对我都不起作用。然而，我想使用模态淡入淡出。我的代码调用ajax来保存更改，然后在成功时执行以下操作：

$('#myModal').modal('hide');
doRefresh();

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

问题是doRefresh当时正在更新模式下的页面。如果我把桃金娘摘下来，它就成功了。所以我最后做的是：

$('#myModal').modal('hide');
setTimeout(doRefresh, 500);

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

这个问题将通过隐藏模态的各个元素来解决。
例如：

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

清除背景

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

$(".modal-backdrop").toggleClass("hide, show");

在bs4中测试我定义了我的模态：

 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();

<div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>Waiting</strong>
            </div>
            <div class="modal-content">
                <div>
                    Please don't close your tab!
                </div>
                <div class="d-flex justify-content-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <strong>Loading...</strong>
            </div>
        </div>
    </div>
</div>

我的想法是，在ajax成功后，将调用函数StopLoadingAnimation什么将触发事件单击元素btnCloseModal（就像在关闭模式时单击按钮btnCloseModal）
您确定没有任何控制台错误吗？我只看到当出现错误时，屏幕会变黑。从我从您的代码示例中了解到，一切看起来都很正常。@AronBoyette没有控制台错误。可能有重复的。您能检查一下您是否在css中设置了任何其他元素的“z-index”吗？如果是，请评论它，再试一次。有时它是由HTML放置顺序引起的，与其他HTML元素截获。不鼓励只回答代码。请添加一些解释，说明这是如何解决问题的，或者这与现有答案有何不同。
 $("#modal").modal('hide');  
 $('body').removeClass('modal-open');
 $(".modal-backdrop").remove();