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');

Answer 2

我有同样的问题，我能找到工作的唯一方法是单独删除模态的部分正在生成。只需将此功能放入yous js中，然后在html或js中的按钮上进行onclick事件。希望我帮忙。

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

Answer 3

尝试：

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

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

Answer 4

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

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

这是一个肮脏，肮脏的黑客，但把电话打包到“隐藏”。在超时使它对我有用：

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

如果使用这个＆＃34;解决方案＆＃34;对于该问题，您可能需要调整超时值。 Bootstrap动画似乎需要大约125 - 200 ms，因此300提供了一个很好的安全缓冲区。

Answer 5

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

找到此链接

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

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

Answer 6

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

$（ “按钮[数据解雇= \” 模态\ “]”）点击（）;

这将自动关闭对话框。

Answer 7

这只是一个时间问题。淡入淡出动画需要时间，javascript无法关闭它。只需取消淡入淡出动画即可正常使用！

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

（不使用class =“modal fade”，jus class =“modal”）

Answer 8

我尝试了几个建议的解决方案，唯一适合我的解决方案是：

$（ “modal.in。”）模态（ '隐藏'）;

有些人确实清楚了模态和背景，但后来没有重新显示随后的调用。

Answer 9

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

Answer 10

除了那些不使用模态淡化的选项外，这些选项都不适用于我。但是我想使用模态淡入淡出。我的代码正在进行ajax调用以保存更改，然后成功执行此操作：

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

问题是doRefresh然后在模态下更新页面。如果我删除了doRefresh，它就可以了。所以我最终做的是：

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

Answer 11

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

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

Answer 12

要清除背景

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

在bs4中测试

Answer 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一样）

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

13 个答案: