Angular modal popup出现在底部

Question

我正在尝试使用Angular 5+和Bootstrap创建模式弹出窗口。问题在于，它没有显示为弹出窗口，而是显示在底部，就像是页面的延续一样。它也为其自身添加了白色背景。

现在，如果添加此CSS代码：

ngb-modal-window[role="dialog"] {
  display:flex;
  position: fixed;
  left: 400px;
  top: 200px;   
}

它被固定并最终看起来像原本的样子。问题是这会影响页面的所有ngb-modal-window[role="dialog"]元素，而我只需要这一个元素。您以前遇到过类似的东西吗？

这是我创建弹出窗口的方式：

模式组件的HTML：

<div class="modal-header">
  <h1 class="modal-title">Messages Popup</h1>
  <button aria-label="Close" data-dismiss="modal" class="close" type="button" (click)="activeModal.dismiss('closed')"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
  <h5>test</h5>
</div>
<div class="modal-footer">
  <button data-dismiss="modal" class="btn btn-secondary float-left" type="button" (click)="activeModal.dismiss('closed')">Done</button>
</div>

messagesComponent.ts：

export class JhiMessagesComponent {
  constructor(private modalService: NgbModal) {

  }

  showMessagesModal(){
    const modalRef = this.modalService.open(JhiMessagesModalComponent);
  }
}

messages-modal.component.ts：

export class JhiMessagesModalComponent implements OnInit {
  constructor(public activeModal: NgbActiveModal) {

  }

Answer 1

您在正确的轨道上！

我只是将CSS和HTML添加为这个（或者甚至是模式类之后的选择器）

<div class="modal-body pop-out">
  <h5>test</h5>
</div>

然后使用CSS：

.pop-out {
  display:flex;
  position: fixed;
  left: 400px;
  top: 200px;   
}

我会补充，这是正确的路线，因为您具有相同的模态框架，但要求不同，当您需要不同的外观时，通过包含一个类来指定可选的CSS，以明确差异的来源；并且不会更改默认行为。