嵌套ui bootstrap模态，缺失背景

在我的应用程序中，我打开两个模态，一个在另一个中。两个模态都有backdrop: 'static'属性。嵌套ui bootstrap模态，缺失背景

第一次打开两个模态都没问题，但是当我关闭它们然后再次打开它们时，第二个模式将失去其背景，或者至少背景不会褪色。

我会试着在plunkr中重现这个问题，但是我对这些问题很陌生，所以我想我会看看如果这是一个已知问题，或者如果任何人有问题可以解决问题，任何人都可以？

更新好了，所以我创建了一个-plunker-与我的问题，因为我创造这个plunker我意识到这个问题是我info模式/工厂。

我从服务器请求一些数据，这是用setTimeout函数模拟的。在加载数据时，将显示一个信息模式，这在第一个嵌套模式打开之前关闭，但我仍然认为这是问题所在。

要重现该问题： '我开'

新闻“加载”数据，并打开第一个模式。然后按'hello'文本打开第二个模式。

注意这就是它应该如何，两个模态都有正确的背景消失。

关闭两个模态并再次打开它们，这次你会看到第二个模态失去了背景。

来源

2015-12-21 klskl

我希望这可以帮助你我的朋友

 angular.module("app", []); 
 
     angular.module("app").controller("ctrl", function ($scope) { 
 
      $scope.openModals = function() { 
 
       $("#myModal1").modal("show"); 
 
       $("#myModal2").modal("show"); 
 
      } 
 

 
      $scope.openModal_1 = function() { 
 
       $("#myModal1").modal("show"); 
 
      } 
 
     });

<!doctype html> 
 
<html ng-app="app" ng-controller="ctrl"> 
 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 
<body> 
 

 
    <button ng-click="openModals()">open both modal</button> 
 
    <button ng-click="openModal_1()">open modal 1 and then modal 2</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog"> 
 
     <div class="modal-dialog" role="document"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
        <h4 class="modal-title">Modal title 1</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> 
 
         Launch modal 2 
 
        </button> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
        <button type="button" class="btn btn-primary">Save changes</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"> 
 
     <div class="modal-dialog" role="document"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
        <h4 class="modal-title">Modal title 2</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
        <button type="button" class="btn btn-primary">Save changes</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script> 
 
</body> 
 
</html>

来源

2015-12-21 12:37:39 Maher

嵌套ui bootstrap模态，缺失背景

回答

相关问题