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

【问题标题】：How to close Bootstrap 3 modal programmatically on AJAX success?如何在 AJAX 成功时以编程方式关闭 Bootstrap 3 模式？
【发布时间】：2016-03-21 03:37:45
【问题描述】：

我有一个代码，我想做的是在 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。

【问题讨论】：

您确定没有任何控制台错误吗？我只看到出现错误时屏幕保持黑色褪色。根据我从您的代码示例中得知，一切看起来都是正确的。
@AronBoyette 没有控制台错误。
stackoverflow.com/questions/23677765/…的可能重复
你能检查一下你是否在你的css中设置了任何其他元素的“z-index”吗？如果是，请评论它再试一次..
有时是由于 HTML 放置顺序与其他 HTML 元素截取造成的

标签： javascript jquery ajax twitter-bootstrap twitter-bootstrap-3

【解决方案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');

【讨论】：

【解决方案2】：

我有同样的确切问题，我能找到工作的唯一方法是单独删除正在生成的模态部分。只需将此函数放入您的 js 中，并在您的 html 或 js 中的按钮上创建一个 onclick 事件。希望我能帮上忙。

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

【讨论】：

【解决方案3】：

试试：

$(".modal.in").modal("hide");

这将隐藏当前活动的模式。

【讨论】：

【解决方案4】：

我自己在类似的情况下遇到了这个问题。

这似乎与javascript + bootstrap动画的异步特性有关。

这是一个肮脏、肮脏的 hack，但是在超时中包装“隐藏”的调用让它对我有用：

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

如果采用这种“解决方案”来解决问题，您可能需要调整超时值。引导动画似乎需要大约 125 - 200 毫秒，因此 300 提供了一个很好的安全缓冲区。

【讨论】：

【解决方案5】：

$('#deleteContactModal').modal('hide')

找到这个链接

https://getbootstrap.com/docs/3.3/javascript/#modal-hide

它提供了关于模型窗口的详细信息https://getbootstrap.com/docs/3.3/javascript/#modal-hide

【讨论】：

【解决方案6】：

简单的以编程方式单击对话框的关闭按钮。

$("button[data-dismiss=\"modal\"]").click();

这将自动关闭对话框。

【讨论】：

【解决方案7】：

这只是一个时间问题。 Fade 动画需要时间，javascript 无法关闭它。只需取消淡入淡出动画，它就可以正常工作！

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

（不使用 class="modal fade"，仅 class="modal"）

【讨论】：

【解决方案8】：

我尝试了几种建议的解决方案，唯一对我有用的是：

$(".modal.in").modal('hide');

有些确实清除了模态框和背景，但后来它没有重新显示后续调用。

【讨论】：

【解决方案9】：

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

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

【讨论】：

谢谢！！！这是对我有用的独特选择；）

【解决方案10】：

$.ajax({
    type: "POST",
    url: "admin/pc-item-insert.php",
    data: $(this).serialize(),
    success: function(data) {
        $("#showinfo").html(data);
        $(".modal").modal("hide");                  
    },
});

【讨论】：

不鼓励仅使用代码的答案。请添加一些解释，说明这如何解决问题，或者这与现有答案有何不同。 From Review

【解决方案11】：

除了说不使用模态淡入淡出的选项之外，这些选项对我都不起作用。但是我想使用模态淡入淡出。我的代码正在进行 ajax 调用以保存更改，然后在成功时这样做：

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

问题是 doRefresh 正在更新模式下的页面。如果我删除了doRefresh，它就起作用了。所以我最终做的是：

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

【讨论】：

【解决方案12】：

清除背景

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

在 bs4 中测试

【讨论】：

【解决方案13】：

我定义了我的模态：

<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>

然后我创建函数：

  var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
    console.log("trigger show");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
    console.log("trigger");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
    console.log("event");
    $(e.currentTarget).off('shown');
    $(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");
}

我的想法是在 ajax 成功之后将调用函数 StopLoadingAnimation 什么会触发事件单击元素 btnCloseModal （就像您在关闭模式时单击按钮 btnCloseModal 一样）

【讨论】：