Закрыть модальное окно на фоне

Question

Я создал модальное окно, используя html, css и машинописный текст в Angular 4.

Модальное окно работает, открывается и закрывается, но я не могу щелкнуть по фон, чтобы также закрыть модальное окно, пока он просто работает с кнопкой X для закрытия.

Код:

<button (click)="openModalBtn()" id="bt">
  {{buttonName}}
</button>

<div class="bg-modal" id="bg-modal" *ngIf="open">
      <div class="modal-content" id="openModal">
        <div class="col-12">
          <div class="close" id="close" (click)="closeThis()">+</div>
          <p class="title">Modal</p>
          <hr>
        </div>
        <div class="col-12">
          <div class="contents">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequ.</p>
          </div>
        </div>
        <div class="confirm" id="confirm" (click)="confirmModal()">OK</div>
      </div>
    </div>

&

  public open: boolean = false;
    public buttonName: any = 'Open';


      ngOnInit() {
    }

    openModalBtn() {
        this.open = !this.open;
    }

    public closeThis(): void {
        this.open = false;
    }

     public confirmModal(): void {
        this.open = false;
    }

    public closeAll(): void{
         this.open = false;
    }

Я попытался поместить все это в еще один элемент div, и он работает для закрытия, щелкнув в любом месте, но это означает этот щелчок в любом месте модального окна также закрывает его.

Справка?

Answer 1

Попробуйте другой способ прослушивания события щелчка:

import { Component, OnInit, ElementRef, HostListener, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit, AfterViewInit {

    public open: boolean = false;
    public buttonName: any = 'Open';

    modalElement: any;

    constructor(private elementRef: ElementRef) { }

    @HostListener('document:click', ['$event'])
    clickout(event) {
        if (!this.elementRef.nativeElement.contains(event.target)) {
            this.closeAll();
        }
    }

    ngAfterViewInit() {
        this.modalElement = this.elementRef.nativeElement.querySelector('#bg-modal');
    }

    ngOnInit() {
    }

    openModalBtn() {
        this.open = !this.open;
    }

    public closeThis(): void {
        this.open = false;
    }

    public confirmModal(): void {
        this.open = false;
    }

    public closeAll(): void {
        this.open = false;
    }
}

Answer 2

Прослушайте событие щелчка окна и возьмите ссылку Viewchild на ваш модальный файл. В окне щелкните, проверьте, содержит ли ваш модальный элемент целевой элемент. Если его нет, закройте модальное окно.

@ViewChild("<modal-referece>",{static:false}) modalRef:ElementRef;

@HostListener('window:click', ['$event.target'])
onClick(elem) {
    let element: HTMLElement = elem as HTMLElement;
    if(!(this.modalRef.nativeElement as HTMLElement).contains(element)){
       //close modal
    }
}

Answer 3

Ваш оверлейный div должен закрываться сверху. Попробуйте это

<div id="overlay" (click)="closeThis($event)" *ngIf="open" class="overlay"></div>

<div class="bg-modal" id="bg-modal">
  <div class="modal-content" id="openModal">
    <div class="col-12">
      <div class="close" id="close" (click)="closeThis($event)">+</div>
      <p class="title">Modal</p>
      <hr>
    </div>
    <div class="col-12">
      <div class="contents">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequ.</p>
      </div>
    </div>
    <div class="confirm" id="confirm" (click)="confirmModal()">OK</div>
  </div>
</div>



.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.5);
}

.bg-modal{
  position: fixed;
  z-index: 10
}

Answer 4

Сделайте наложение вокруг вашего модального окна, например: -

<button (click)="openModalBtn()" id="bt">
  {{buttonName}}
</button>
<div id="overlay" (click)="closeThis($event)" *ngIf="open" class="overlay">
<div class="bg-modal" id="bg-modal">
      <div class="modal-content" id="openModal">
        <div class="col-12">
          <div class="close" id="close" (click)="closeThis($event)">+</div>
          <p class="title">Modal</p>
          <hr>
        </div>
        <div class="col-12">
          <div class="contents">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequ.</p>
          </div>
        </div>
        <div class="confirm" id="confirm" (click)="confirmModal()">OK</div>
      </div>
    </div>
</div>

и Css: -

.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: transparent;
}

TS: -

public closeThis(event) {
   if(event.target.id==='close' || event.target.id ==='overlay') {
     this.open= false;
   }
}