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未正确显示

回答

相关问题