我正在学习在 AngularJS 和 Bootstrap 4 框架中使用 Modal。我已经设法显示它,但它没有正确显示,即在后台阻止组件,如果 animation: true
则无法显示。我不确定是什么原因造成的,因为我在我的应用程序 Controller 中注入(inject)了 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 中与显示模态相关的代码
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
时的截图(即模态不可见,就好像模态在屏幕后面)
如有任何帮助,我们将不胜感激。
最佳答案
看完this issue在 GitHub 中,发现这是使用 Bootstrap 4 时的问题。Bootstrap 4 与 Bootstrap 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);
希望这次更新能对以后的人有所帮助。
关于html - Angular JS - 模态显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43654367/