Модальный закрывается при нажатии на - PullRequest
Новая
       9

Модальный закрывается при нажатии на

0 голосов
/ 20 июня 2019

У меня есть модал, который закрывается, когда я нажимаю на определенные области. Это в основном вокруг верхней, нижней и боковых сторон.

Это мой модал: 

<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-background = "static" на "true", но у меня ничего не вышло

1 Ответ

0 голосов
/ 20 июня 2019

Библиотека *1001* с загрузкой Angular-Powered дает вам компонент Modal , который вы должны использовать. Это позволяет вам установить опцию статического фона следующим образом. 

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

Спасибо.

...