Question

我有一个模式，当我单击它的某些区域时会关闭。这主要是围绕顶部，底部和侧面。

这是我的模态：

<modal data-backdrop="static" id="editAcc">
  <div class="modal"  style="height:90%; width: 500px; max-height: 1000px; align-self: center">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title" >Edit Account</h4>
    <button type="button" class="close" aria-label="Close" (click)="closeModal('editAcc')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div *ngIf="isModalError" class="alert alert-danger angular-with-newlines">
    <button class="close" type="button" data-dismiss="alert" (click)='closeAlert()'>×</button>
     ERROR: {{errorMessage.error.message}}</div>

     <div class="modal-body" style="width: 500px" >
      <form (ngSubmit)="onSubmit()">
        <div class="form-group">
            <div class="dropdown">
                <label>Choose Client: </label>
              <select (change)="onChange($event)" [(ngModel)]="newAccount.client" name="client" id="client">
               <option  class="dropdown-item" *ngFor="let item of clients" [value]="item" >{{item}}</option>
              </select>
            </div>
            <br>

    <div class="input-group">
        <label for="LoadCps">Load Cps: </label>
      <input type="number" id="loadCps" name="loadCps" maxlength=1 [(ngModel)]="newAccount.loadCps">
      <div class="input-group-append"></div>
    </div>
    <br>


    <div class="input-group">
        <label for="STPFlag">STP Flag: </label>
      <input type="number" id="STPFlag" name="STPFlag" maxlength=1 [(ngModel)]="newAccount.STPFlag">
      <div class="input-group-append"></div>
    </div>
    <br>


      <div class="modal-footer">
        <button  type="submit" class="btn btn-outline-dark" >Save</button>
      </div>

    </form>
  </div>
</div>


<div *ngIf="isOpen" class="modal-background"></div>


</modal>

这是我的打开/关闭功能：

  openModal(id: string) {
    this.modalService.open(id);
    this.isOpen = true;

}
  closeModal(id: string) {
    this.modalService.close(id);
    this.isOpen = false;
}

我尝试将data-backdrop =“ static”更改为“ true”，但对我来说还没有解决

Answer 1

Angular-Powered bootstrap库为您提供了应使用的Modal组件。它允许您像这样设置背景静态选项。

const modalRef = this.modalService.open(MyModalComponent, { backdrop: 'static' });

谢谢。

单击时模态关闭

1 个答案: