我遵循了取自 here 的解决方案但它不工作。我需要将模式在屏幕中间居中,水平和垂直。我尝试了这个 plunk但它不起作用,有什么想法吗?
Javascript
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {
$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
windowClass: 'app-modal',
});
});
HTML
<style>
.app-modal .modal-content {
width: 360px;
height: 200px;
}
</style>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h4 class="modal-title">The Title</h4>
</div>
<p>Some text</p
</script>
最佳答案
要在 bootstrap 中将模态居中,您可以使用 transform: translate(-50%, -50%);
结合 postion: absolute;
属性。
<style>
.modal-dialog {
margin: 0;
top: 50%;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
不要忘记将边距清零 margin: 0;
关于angularjs - 在屏幕中间居中 Angular UI 模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40498909/