AJAX成功后如何关闭模式窗口答案

【问题标题】：How do I close a modal window after AJAX successAJAX成功后如何关闭模式窗口
【发布时间】：2016-03-03 13:48:21
【问题描述】：

我有一个打开模式的按钮，但我通过单击背景或 ESC 键阻止了模式关闭。

我的按钮如下所示：

<button data-toggle="modal" data-target="#CompanyProfile"data-backdrop="static" data-keyboard="false">Click </button>

$.ajax 使用 jQuery 成功后如何关闭此模式？

我做了一些测试 - 模式已关闭但背景被锁定，在刷新页面之前我无法执行任何操作

【问题讨论】：

你能展示你的代码吗？
按钮属性 data-toggle="modal" data-target="#CompanyProfile"data-backdrop="static" data-keyboard="false"
你能发布模态以及任何相关的css
先生，我的 ajax 编码工作正常，但我不知道如何关闭这个模态按钮，因为它有这些属性 9data-backdrop="static" data-keyboard="false")

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

要关闭引导模式，您可以将“隐藏”作为选项传递给模式方法，如下所示。

$('#CompanyProfile').modal('hide');

在 ajax 中使用此代码成功。

Fiddle Demo

【讨论】：

这个是隐藏模式，但背景是淡出..我总是刷新页面继续
隐藏模态后使用location.reload();。这将自动重新加载页面。
如果您不想重新加载，请使用$('.modal-backdrop').remove(); 删除背景。这不是一个正确的方法。
在不重新加载页面的情况下还有其他选项吗？ location.reload()
使用 $('.modal-backdrop').remove();

【解决方案2】：

添加此解决方案，因为似乎没有列出通用方法。

如果您希望在成功时关闭任何模式，但不希望手工制作对服务器的每个 $.ajax 调用，您可以使用以下命令：

$('.modal form').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: $(this).serializeObject(),
        contentType: 'application/json',
        beforeSend: function(xhr){xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")},
        success: function(data) {
            console.log(data.success);
            if(data.success===1) {
                // loop through all modal's and call the Bootstrap
                // modal jQuery extension's 'hide' method
                $('.modal').each(function(){
                    $(this).modal('hide');
                });
                console.log('success');
            } else {
                console.log('failure');
            }
        }
    });
});

顺便说一句，如果您希望将上面的代码用作复制/粘贴，您将需要以下内容，它将表单数据转换为 JSON 以发布到服务器，或者将 $(this).serializeObject() 更改为 @987654324 @：

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    o = { request: o };
    return o;
};

参考：Bootstrap JS Modal

【讨论】：

【解决方案3】：

你可以试试

 $( document ).ready(function() {               
        $(".btn").button().click(function(){         // button click

                $('#CompanyProfile').modal('show')   // Modal launch
                     $.ajax({
                              type: "POST",
                              url: "url",
                              data:{data:data},
                              cache: false,                         
                              success: function(data) { 
                                                  $('.text').html(data); 
                                                 }
                   })                          
         });   
  });

确保模式只启动一次

【讨论】：

【解决方案4】：

您可以尝试以下方法。未经测试，但你会明白的。

$.ajax({
  url: 'yourscript.php',
  data: $('form#yourForm').serialize(),
  type: 'post'
}).done(function(response) { 
  // trigger modal closing here since ajax is complete.
});

【讨论】：

既然他说“在 $.ajax 成功之后”，你不应该使用 success 而不是 done？
没错，成功也可以用。（我大部分时间使用 .done 的习惯）
这并不能解决问题，因为他需要的正是你在评论中的内容，如何触发关闭。
是的 Ben.... 你说得对，但我的问题是模式没有正确关闭，因为如果我删除按钮有这两个属性（data-backdrop="static" data-keyboard="false"）此属性然后一切正常，但用户通过背景或 ECS 按钮关闭此模式单击....

【解决方案5】：

我定义了我的模态：

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

【讨论】：

【解决方案6】：

success :function(){
              console.log("success");
              $('#contact_modal').html("<img src='img/bg/success.gif'>").delay(3000).fadeOut(450);
              $('body').removeClass('modal-open');
              $('.modal-backdrop.show').css('opacity','0');
              $('.modal-backdrop').css('z-index','-1')
          }

【讨论】：