中心角度UI模式位于屏幕中间

时间:2022-01-24 10:42:01

I followed the solution taken from here but it's not working. I need to center the modal right in the middle of the screen, both horizontally and vertically. I attempted in this plunk but it's not working, any ideas?

我按照从这里采取的解决方案,但它没有工作。我需要将模态中心放在屏幕中间,水平和垂直。我尝试了这个插件,但它不起作用,任何想法?

Javascript

使用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

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 个解决方案

#1


2  

In your css, try this:

在你的CSS中,试试这个:

.modal-dialog {
    position: absolute;
    top: 50%;
    /*half of the modal height*/
    margin-top: -100px;
    left: 50%;
    /*half of the modal width*/
    margin-left: -180px;
}

#2


2  

To center your modal in bootstrap you can use transform: translate(-50%, -50%); in combination with the postion: absolute; property.

要将模态置于引导程序中心,可以使用transform:translate(-50%, - 50%);结合位置:绝对;属性。

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

Don't forget to zero out the margins margin: 0;

不要忘记将边距清零:0;

#1


2  

In your css, try this:

在你的CSS中,试试这个:

.modal-dialog {
    position: absolute;
    top: 50%;
    /*half of the modal height*/
    margin-top: -100px;
    left: 50%;
    /*half of the modal width*/
    margin-left: -180px;
}

#2


2  

To center your modal in bootstrap you can use transform: translate(-50%, -50%); in combination with the postion: absolute; property.

要将模态置于引导程序中心,可以使用transform:translate(-50%, - 50%);结合位置:绝对;属性。

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

Don't forget to zero out the margins margin: 0;

不要忘记将边距清零:0;