在背景上关闭模态

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

您的叠加 div 应该在顶部关闭。试试这个<div id="overlay" (click)="closeThis($event)" *ngIf="open" class="overlay"></div><div class="bg-modal" id="bg-modal">&nbsp; <div class="modal-content" id="openModal">&nbsp; &nbsp; <div class="col-12">&nbsp; &nbsp; &nbsp; <div class="close" id="close" (click)="closeThis($event)">+</div>&nbsp; &nbsp; &nbsp; <p class="title">Modal</p>&nbsp; &nbsp; &nbsp; <hr>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-12">&nbsp; &nbsp; &nbsp; <div class="contents">&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="confirm" id="confirm" (click)="confirmModal()">OK</div>&nbsp; </div></div>.overlay {&nbsp; position: fixed;&nbsp; width: 100vw;&nbsp; height: 100vh;&nbsp; left: 0;&nbsp; top: 0;&nbsp; background: rgba(0,0,0,0.5);}.bg-modal{&nbsp; position: fixed;&nbsp; z-index: 10}

Answer 2

在你的模态周围有一个叠加，比如：-<button (click)="openModalBtn()" id="bt">&nbsp; {{buttonName}}</button><div id="overlay" (click)="closeThis($event)" *ngIf="open" class="overlay"><div class="bg-modal" id="bg-modal">&nbsp; &nbsp; &nbsp; <div class="modal-content" id="openModal">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="close" id="close" (click)="closeThis($event)">+</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="title">Modal</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <hr>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="contents">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="confirm" id="confirm" (click)="confirmModal()">OK</div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>和 css ：-.overlay {&nbsp; position: fixed;&nbsp; width: 100vw;&nbsp; height: 100vh;&nbsp; left: 0;&nbsp; top: 0;&nbsp; background: transparent;}TS ：-public closeThis(event) {&nbsp; &nbsp;if(event.target.id==='close' || event.target.id ==='overlay') {&nbsp; &nbsp; &nbsp;this.open= false;&nbsp; &nbsp;}}

Answer 3

侦听窗口单击事件并获取对模式的引用。在窗口中，单击检查模式是否包含目标元素。如果它不包含，请关闭模态。Viewchild@ViewChild("<modal-referece>",{static:false}) modalRef:ElementRef;@HostListener('window:click', ['$event.target'])onClick(elem) {&nbsp; &nbsp; let element: HTMLElement = elem as HTMLElement;&nbsp; &nbsp; if(!(this.modalRef.nativeElement as HTMLElement).contains(element)){&nbsp; &nbsp; &nbsp; &nbsp;//close modal&nbsp; &nbsp; }}

Answer 4

尝试另一种方式来侦听点击事件：import { Component, OnInit, ElementRef, HostListener, AfterViewInit } from '@angular/core';@Component({&nbsp; &nbsp; selector: 'app-modal',&nbsp; &nbsp; templateUrl: './modal.component.html',&nbsp; &nbsp; styleUrls: ['./modal.component.css']})export class ModalComponent implements OnInit, AfterViewInit {&nbsp; &nbsp; public open: boolean = false;&nbsp; &nbsp; public buttonName: any = 'Open';&nbsp; &nbsp; modalElement: any;&nbsp; &nbsp; constructor(private elementRef: ElementRef) { }&nbsp; &nbsp; @HostListener('document:click', ['$event'])&nbsp; &nbsp; clickout(event) {&nbsp; &nbsp; &nbsp; &nbsp; if (!this.elementRef.nativeElement.contains(event.target)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.closeAll();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; ngAfterViewInit() {&nbsp; &nbsp; &nbsp; &nbsp; this.modalElement = this.elementRef.nativeElement.querySelector('#bg-modal');&nbsp; &nbsp; }&nbsp; &nbsp; ngOnInit() {&nbsp; &nbsp; }&nbsp; &nbsp; openModalBtn() {&nbsp; &nbsp; &nbsp; &nbsp; this.open = !this.open;&nbsp; &nbsp; }&nbsp; &nbsp; public closeThis(): void {&nbsp; &nbsp; &nbsp; &nbsp; this.open = false;&nbsp; &nbsp; }&nbsp; &nbsp; public confirmModal(): void {&nbsp; &nbsp; &nbsp; &nbsp; this.open = false;&nbsp; &nbsp; }&nbsp; &nbsp; public closeAll(): void {&nbsp; &nbsp; &nbsp; &nbsp; this.open = false;&nbsp; &nbsp; }}