中心Angular UI Modal位于屏幕中间

时间:2016-11-09 01:04:11

标签: angularjs angular-ui-bootstrap angular-ui

我按照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>

2 个答案:

答案 0 :(得分:2)

在你的CSS中,试试这个:

xyz(...$array);

答案 1 :(得分:2)

要将模态集中在引导程序中,您可以将transform: translate(-50%, -50%);postion: absolute;属性结合使用。

<style>
.modal-dialog {
  margin: 0;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>

不要忘记将边距归零margin: 0;