从服务器获得响应后关闭控制器中的引导模式答案

【问题标题】：Close Bootstrap modal in controller after getting response from server从服务器获得响应后关闭控制器中的引导模式
【发布时间】：2017-12-22 15:03:04
【问题描述】：

提交表单时，会调用服务器并显示模式。当服务器响应成功时，必须关闭模式并加载了一个新页面。

我已经尝试使用 ng-show、ng-if 来根据控制器中的值启用/禁用，但这不会消除模态背景。我可以使用 data-dismiss="modal" 关闭同一页面上的模式，但是如何在导航到新页面之前从控制器部分执行此操作？

<div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">    
    <img src="img/processing.gif" id="ajaxSpinnerImage" title="working...">
  </div>
</div>

点击提交按钮时

<button type="submit" data-toggle="modal" 
data-target="#myModal"  ng-click=" formsubmit(orderForm.$valid); ></i>  
Place Order </button>

从控制器调用服务器

 $scope.formsubmit = function (isValid) {
      if (isValid) {                              
                  $http.post($scope.url).
                    success(function (data, status) {  

                        //NEED TO CLOSE THE MODAL HERE
                   //navigating to a new page now
                   window.location.assign("NewPageToNavigate.html");

                    })
      }

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

将此引导模式选项连接到服务器响应，模式将关闭：

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

More info and options on the Bootstrap documentation.

关于主体和背景类的删除，请检查您的代码，因为在正常情况下，Bootstrap 应该会在触发上述方法时删除那些。

【讨论】：

我还必须添加它以在页面加载后删除背景。 $('body').removeClass('modal-open'); $('.modal-backdrop').remove();
好吧，奇怪。触发 Bootstrap 方法应该会为您做到这一点。
可以使用.click()，而不是.trigger( "click" );。此外，这可能会双重触发模态。如果您想要 100% 完整的方式来隐藏 ANY 模式，请使用 $('.modal').filter(':visible').modal('hide')。
@NathanielFlick 我看到了更新，我正在评论它。 $('[data-dismiss="modal"]').trigger( "click" ); 可以告诉同一个模态多次关闭。或者甚至告诉它关闭根本没有打开的模式。
经过测试（bootply.com/dIG90LalIk 查看测试代码），我发现.modal('hide'); 不会触发隐藏模式上的hidden.bs.modal 事件。这消除了对.filter(':visible') 的需要。我错了，尽管当您尝试关闭它们时它会触发隐藏模式上的事件。一个普通的.modal('hide') 就足够了。

【解决方案2】：

在控制器收到响应后关闭模态

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

【讨论】：