在后台关闭模态

Question

我在 Angular 4 中使用 html、css 和 typescript 制作了一个模态框。

模式正在工作，打开和关闭，但我似乎无法点击背景来关闭模式，现在它只是在按钮 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

在你的模态框周围有一个叠加层，例如：-

<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;
   }
}

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

尝试另一种方式来监听点击事件：

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;
    }
}