ng-bootstrap 模式 w/o 全屏

Question

我运行遇到一个问题，即我的模式总是全屏。

模板内模态调用按钮：

 <button type="button"
        class="btn btn-danger"
        (click)="openRejectModal(rejectTemplate)">Reject</button>

ng-template 结尾的html:

<ng-template #rejectTemplate>
  <app-reject-modal (close)="closeModal()"
    (send)="sendReject()"></app-reject-modal>
</ng-template>

模态组件html:

<div class="modal-container">

  <div class="modal-header">
    <h4 class="modal-title"
      id="modal-basic-title">Profile update</h4>
    <button type="button"
      class="close"
      aria-label="Close"
      (click)="close.emit()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control"
          id="exampleFormControlTextarea1"></textarea>

      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button"
      class="btn btn-outline-dark"
      (click)="modal.close('Save click')">Save</button>
  </div>
</div>

class="modal-container" 只是 fiddle 的自定义 css 当前位于：(width: 60%, height:60%)

模态打开函数：

 openRejectModal(template) {
    this.modalService.open(template, { size: 'lg', backdrop: true });
  }

刚刚添加了选项对象，但大小和背景并没有改变该死的东西...:(

我希望我的模式如下所示： ng-boostrap documentation

但我的总是全屏。解决此问题的解决方案是什么？

我的模式看起来像这样的 atm： Pic

Answer 1

根据 NgBoostrap API documentation，我们可以传递带有自定义 class 的 windowClass 属性，它将附加到模式。

这里，在调用模态打开的方法上，我们将custom-modal的class传递给windowClass 属性:

open(content) {
  this.modalService.open(template, {windowClass : 'custom-modal'})
}

在 CSS 上添加以下内容以覆盖宽度。您可以将 400px 替换为您认为合适的任何值。

.custom-modal .modal-dialog {
  max-width: 400px;
}

您可能需要在您的全局 CSS（或者与您的 index.html 位于同一目录级别的 style.css 文件中添加以上内容）如果将它放在组件的 css.

中则不起作用

ng-bootstrap 模式 w/o 全屏

ng-boostrap modal w/o fullscreen

bootstrap-modal

bootstrap-4

ng-bootstrap

angular