首頁猿問在背景上關閉模態

在背景上關閉模態

JavaScript

臨摹微笑 2022-09-02 21:32:22

我在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元素中，它可以通過單擊任意位置來關閉，但這意味著單擊模式內的任意位置也會關閉它。幫助？

查看完整描述

4 回答

大話西游666

TA貢獻1817條經驗獲得超14個贊

您的疊加 div 應該在頂部關閉。試試這個

<p class="title">Modal</p>

<hr>

</div>

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

.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

}

反對回復 2022-09-02

湖上湖

TA貢獻2003條經驗獲得超2個贊

在你的模態周圍有一個疊加，比如：-

</button>

<p class="title">Modal</p>

<hr>

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

}

反對回復 2022-09-02

慕妹3242003

TA貢獻1824條經驗獲得超6個贊

偵聽窗口單擊事件并獲取對模式的引用。在窗口中，單擊檢查模式是否包含目標元素。如果它不包含，請關閉模態。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

}

反對回復 2022-09-02

縹緲止盈

TA貢獻2041條經驗獲得超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;

}

反對回復 2022-09-02

4 回答
0 關注
107 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在背景上關閉模態

在背景上關閉模態

4 回答

添加回答