Question

我遇到了一个问题，我的模态总是全屏显示。

在模板内部模态调用btn：

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

html末尾的

ng-template：

<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"只是一个小提琴的自定义CSS，目前位于(width: 60%, height:60%)

模式打开功能：

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

options对象刚刚添加，但是大小和背景不会改变该死的东西...：（

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

但是我的屏幕始终是全屏的。谁可以解决此问题？

我的模态如下所示： Pic

Answer 1

根据NgBoostrap API documentation，我们可以向windowClass属性传递一个自定义类，该类将附加到模态。

在这里，在调用模式的方法上，我们将custom-modal的类传递给windowClass属性：

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

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

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

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

ng-boostrap modal w / o fullscreen

1 个答案: