NgbModal 如何使模态框从右到左显示而不是默认的从上到下

Question

我正在使用 NgbModal，打开时模态默认从上到下打开。是否可以使其从右向左显示。我已经设置了定位，使其位于屏幕的右上角。但看不清打开的方向

我查看了他们的 API，但找不到方向选项。 https://ng-bootstrap.github.io/#/components/modal/examples

这是他们的第一个示例的 stackblitz，这可能是最小的可重现示例

我还发现这个答案它使用纯引导程序而不是像ng bootstrap这样的抽象，所以不确定它如何应用于NgbModal

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Crossclick')"></button>
  </div>
  <div class="modal-body">Modal Content</div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="modal.close('Save click')">
      Save
    </button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">
  Launch demo modal
</button>

<hr />

<pre>{{ closeResult }}</pre>

  open(content: TemplateRef<any>) {
    this.modalService
      .open(content, {
        ariaLabelledBy: 'modal-basic-title',
        animation: true,
      })
      .result.then(
        (result) => {
          this.closeResult = `Closed with: ${result}`;
        },
        (reason) => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

非常感谢帮助

Answer 1

如果您只想要从左到右的几个模态，您可以添加到您的styles.scss（或任何“全局”样式）

.modal.fade:not(.show) .from-left.modal-dialog {
  transform: translate(-50%,0);
}

然后，当你打开时，传递“form-left”类

this.modalService
  .open(content, {
    ariaLabelledBy: 'modal-basic-title',
    animation: true,
    modalDialogClass:'from-left' //<--this add the class "from-left"
  }).result(...)

如果是all您可以简单地使用模态

.modal.fade:not(.show) .modal-dialog {
  transform: translate(-50%,0);
}