第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

在背景上關(guān)閉模態(tài)

在背景上關(guān)閉模態(tài)

臨摹微笑 2022-09-02 21:32:22
我在Angular 4中使用html，css和typescript制作了一個(gè)模態(tài)。模式正在工作，打開(kāi)和關(guān)閉，但我似乎無(wú)法點(diǎn)擊背景來(lái)關(guān)閉模式，因?yàn)楝F(xiàn)在它只是在按鈕X上關(guān)閉。代碼是：<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;    }我嘗試將其全部放在另一個(gè)div元素中，它可以通過(guò)單擊任意位置來(lái)關(guān)閉，但這意味著單擊模式內(nèi)的任意位置也會(huì)關(guān)閉它。幫助？
查看完整描述

4 回答

?
大話西游666

TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超14個(gè)贊

您的疊加 div 應(yīng)該在頂部關(guān)閉。試試這個(gè)


<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

}


查看完整回答
反對(duì) 回復(fù) 2022-09-02
?
湖上湖

TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊

在你的模態(tài)周圍有一個(gè)疊加，比如：-


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

   }

}


查看完整回答
反對(duì) 回復(fù) 2022-09-02
?
慕妹3242003

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊

偵聽(tīng)窗口單擊事件并獲取對(duì)模式的引用。在窗口中，單擊檢查模式是否包含目標(biāo)元素。如果它不包含，請(qǐng)關(guān)閉模態(tài)。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

    }

}


查看完整回答
反對(duì) 回復(fù) 2022-09-02
?
縹緲止盈

TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊

嘗試另一種方式來(lái)偵聽(tīng)點(diǎn)擊事件：


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;

    }

}


查看完整回答
反對(duì) 回復(fù) 2022-09-02
  • 4 回答
  • 0 關(guān)注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)