Angular JS - 模态未正确显示答案

【问题标题】：Angular JS - Modal not shown properlyAngular JS - 模态未正确显示
【发布时间】：2017-09-25 01:08:00
【问题描述】：

我正在学习在 AngularJS 和 Bootstrap 4 框架中使用 Modal。我已经设法显示它，但它没有正确显示，即在后台阻止组件并且如果animation: true 则无法显示。我不确定是什么原因造成的，因为我在我的应用控制器中注入了 ngAnimate 和 ui.bootstrap。

使用的 Angular 和 ui-bootstrap 版本

Angular v1.6.4
UI-bootstrap 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-index 是 1

mystyle.css

#content {
    z-index: 1;
}

下面是animation:false时的截图

下面是animation:true时的截图（即modal不可见，就像modal在屏幕后面一样）

任何帮助将不胜感激。

【问题讨论】：

请提及 Angular 和 ui-bootstrap 的版本
@tanmay 编辑了我的问题
their website 提到它已使用 Bootstrap@3.3.7.. 进行了测试，而 Bootstrap4 可能有一些语法更改，可能会破坏这里的东西

标签： html css angularjs bootstrap-modal bootstrap-4

【解决方案1】：

在 GitHub 中阅读this issue 后，发现这是使用 Bootstrap 4 时的问题。Bootstrap 4 与 Bootstrap 3 具有不同的类名，在这种情况下，版本 3 中的 .in 变为版本中的 .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);

希望此更新可以帮助将来的人。

【讨论】：