垂直居中Angular Bootstrap模态窗口

Question

我如何使这个模态窗口垂直居中，而不管显示的内容大小。在我的页面中，我将一个图片作为模态窗口显示，并希望它在屏幕中央显示。我可以水平对齐它，但是我无法垂直对齐。有没有任何想法或示例可以实现这一点？

我在我的页面中按照这个示例进行了操作：modal window demo plunker，但是我的模态窗口的实际内容如下：

<script type="text/ng-template" id="myModalContent.html">
        <div>
             <img class= "attachmentImage" src={{items}} />
        </div>
</script>

我是否应该在bootstrap.min.css或ui-bootstrap-tpls-0.13.0.js中进行更改，还是最好使用自己的样式表来处理这个问题。

非常感谢您的时间。如果需要更多信息或者我的表述不清，请让我知道。

- user95227

---

给你的 div 添加一个 id，并按照这里的说明进行操作。 - 1Bladesforhire

Answer 1

我强烈反对1Bladesforhire的答案，因为当模态框容器高度超过视口高度时，其顶部将变得无法访问。这是使用绝对垂直居中方法使子元素比父元素更高时的常见问题。

我首选的Bootstrap模态框垂直居中方法是

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}

/* you only need the above CSS. The code below centers the modal trigger button */

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

当高度小于视口高度时，.modal-content 仍然可以完全访问并垂直居中（即使高度为 300vh）：

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}

/* you only need the above CSS. The code below centers the modal trigger button */

.modal-content {
  height: 300vh;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

- tao

---

这是我找到的唯一解决方案，即使视口较小也不会导致一个微小的模态框。谢谢。 - Anthony Jack

Answer 2

这个属性已经在Angular Bootstrap中了。你可以试试这个。希望你的问题能够解决。

Reference https://ng-bootstrap.github.io/#/components/modal/examples

component.ts和下面的component.html

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private modalService: NgbModal) { }

open(content: any, account_no: string) {
    this.modalService.open(content, { centered: true, size: 'xl' });
}

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Modal Title</h4>
        <button type="button" class="btn-close" aria-label="Close" (click)="d('Cross click')"></button>
    </div>
    <div class="modal-body">
        Content Area
        </div>
</ng-template>

- Prem Singh