Angular JS - Modal未正確顯示

我正在學習在AngularJS和Bootstrap 4框架中使用Modal。我已經設法顯示它，但它沒有正確顯示，即阻擋背景中的組件，並且如果animation: true無法顯示。我不知道是什麼原因造成的，因爲我在我的應用程序控制器中注入了ngAnimate和ui.bootstrap。Angular JS - Modal未正確顯示

角度和用戶界面的自舉版本中使用

角v1.6.4
UI，引導V2.5.0

下面我將爲我的代碼。

View.html

<div class="container-fluid content-container" ng-app="listEmployee"> 
<div class="change-password-modal-container"></div> 
    <script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title" id="modal-title">I'm a modal!</h3> 
    </div> 
    <div class="modal-body" id="modal-body"> 
     <ul> 
      <li ng-repeat="item in ctrl.items"> 
       <a href="#" ng-click="$event.preventDefault(); ctrl.selected.item = item">{{ item }}</a> 
      </li> 
     </ul> 
     Selected: <b>{{ ctrl.selected.item }}</b> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" type="button" ng-click="ctrl.ok()">OK</button> 
     <button class="btn btn-warning" type="button" ng-click="ctrl.cancel()">Cancel</button> 
    </div> 
    </script> 
    ... <!--other html elements --> 
</div>

下面是我在控制器代碼這是關係到示出的模態

Controller.js

var ctrl = this; 
    ctrl.items = ['item1', 'item2', 'item3']; 
    ctrl.animationsEnabled = false; 
    ctrl.open = function (size, parentSelector) { 
     var parentElem = parentSelector ? 
      angular.element($document[0].querySelector('.change-password-modal-container ' + parentSelector)) : undefined; 
     var modalInstance = $uibModal.open({ 
      animation: ctrl.animationsEnabled, 
      ariaLabelledBy: 'modal-title', 
      ariaDescribedBy: 'modal-body', 
      templateUrl: 'myModalContent.html', 
      controller: 'ModalInstanceCtrl', 
      controllerAs: 'ctrl', 
      size: size, 
      appendTo: parentElem, 
      resolve: { 
      items: function() { 
       return ctrl.items; 
      } 
      } 
     }); 
     modalInstance.result.then(function (selectedItem) { 
      ctrl.selected = selectedItem; 
     }, function() { 
      $log.info('Modal dismissed at: ' + new Date()); 
     }); 
    };

的z索引我的內容是1

mystyle.css

#content { 
    z-index: 1; 
}

下面是截圖當animation:false

下面是截圖當animation:true（即模式是不可見的，它像模態是在屏幕後面）

任何幫助，將不勝感激。

來源

2017-04-27 Darren Christopher

請提及angular和ui-bootstrap的版本 – tanmay

@tanmay編輯我的問題 –

[他們的網站]（https://angular-ui.github.io/bootstrap/）提到它已經使用[email protected]進行測試..而Bootstrap4可能會有一些語法更改，可能會在這裏破壞事情 – tanmay

在GitHub上閱讀this issue後，原來這是在使用引導4.引導4與引導3個不同的類名，在這種情況下這個問題，它是在版本.in 3版本成爲.show 4.

按照IdanCo在線程中的建議，我在下面重寫（所以別人會更容易閱讀）修復了這個問題。

將類名從更改爲如下所示的ui-bootstrap-tpls-###。js。

   'class': 'modal-backdrop', 
      'ng-style': '{\'z-index\': 1040 + (index && 1 || 0) + index*10}', 
      'uib-modal-animation-class': 'fade', 
      'modal-in-class': 'in' //change this 
      'modal-in-class': 'show' //to this 
      }); 
      if (modal.backdropClass) { 
      backdropDomEl.addClass(modal.backdropClass); 
@@ -477,7 +477,7 @@ 
      'ng-style': '{\'z-index\': 1050 + $$topModalIndex*10, display: \'block\'}', 
      'tabindex': -1, 
      'uib-modal-animation-class': 'fade', 
      'modal-in-class': 'in' //change this 
      'modal-in-class': 'show' //to this 
     }).append(content); 
     if (modal.windowClass) { 
      angularDomEl.addClass(modal.windowClass);

希望此更新可以幫助未來某人。

來源

2017-04-28 02:07:38

Angular JS - Modal未正確顯示

回答

相關問題