如何让NgbModal模态框从右至左弹出而非默认从上至下

由于NgbModal原生API没有直接控制弹出方向的配置项，我们可以通过自定义CSS动画替换默认的从上到下展开效果，同时调整模态框的定位。

步骤1：给模态框添加自定义样式类 #

在调用modalService.open()时，通过windowClass参数添加自定义类，方便后续编写样式：

open(content: TemplateRef<any>) {
  this.modalService
    .open(content, {
      ariaLabelledBy: 'modal-basic-title',
      animation: true,
      windowClass: 'modal-right-top' // 添加自定义类
    })
    .result.then(
      (result) => {
        this.closeResult = `Closed with: ${result}`;
      },
      (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      }
    );
}

步骤2：编写自定义CSS动画和定位样式 #

在全局样式文件（如styles.css）中添加以下CSS，覆盖默认的模态框动画和定位：

/* 自定义模态框定位：右上角 */
.modal-right-top .modal-dialog {
  position: fixed;
  top: 20px;
  right: 20px;
  margin: 0;
  max-width: 400px; /* 根据需求调整宽度 */
}

/* 替换默认的淡入动画为从右到左滑入 */
.modal-right-top.fade .modal-dialog {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.modal-right-top.show .modal-dialog {
  transform: translateX(0);
}

/* 可选：调整模态框背景透明度，避免遮挡内容 */
.modal-right-top .modal-backdrop {
  opacity: 0.2 !important;
}

步骤3：保留原HTML结构不变 #

你的HTML代码无需修改，继续使用原模板即可：

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

原理说明 #

• NgbModal的动画依赖Bootstrap的fade和show类，我们通过自定义类modal-right-top针对该模态框的动画进行覆盖。
• 默认的fade类会让模态框从上方滑入，我们修改transform属性为translateX(100%)（初始在屏幕右侧外），当添加show类时恢复为translateX(0)，实现从右到左滑入效果。
• 通过position: fixed将模态框固定在右上角，调整top和right值控制间距。

内容的提问来源于stack exchange，提问作者binga58