嵌套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模態，缺失背景

回答

相關問題