angular - Ionic 2: โมดอลไม่ปิดเมื่อคลิกบนพื้นหลัง

ฉันกำลังพยายามรันแอปตัวอย่างง่าย ๆ ที่มีโมดอลซึ่งครอบคลุมเฉพาะส่วนล่างของหน้าจอ ฉันต้องการให้โมดอลปิดเมื่อฉันคลิกที่พื้นหลัง ซึ่งฉันคิดว่าเป็นพฤติกรรมที่คาดหวัง อย่างไรก็ตาม ไม่เกิดอะไรขึ้นเมื่อคลิกที่พื้นหลัง ฉันรู้เกี่ยวกับ enableBackdropDismiss ซึ่งควรเป็นค่า true โดยค่าเริ่มต้น ฉันกำลังใช้ Ionic-angular 3.2.1

หน้าแรก :

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { Modal } from '../modal/modal';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {

  }

  openModal(){
    let modal = this.modalCtrl.create(Modal);
    modal.present();
  }

}

<ion-header>
  <ion-navbar>
    <ion-title>
      Modal Test
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="openModal()">Open Modal</button>
</ion-content>

โมดาล

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html',
})
export class Modal {

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController) {
  }

  closeModal(): void {
    this.viewCtrl.dismiss();
  }

}

<ion-footer>
    <ion-navbar>
        <h4>Modal</h4>
        <p>I'm a Modal</p>
        <button ion-button (click)="closeModal()">Close Modal</button>
    </ion-navbar>
</ion-footer>

นี่คือสิ่งที่ปรากฏเมื่อมีการแสดงม็อดัล ม็อดัลจะปิดเฉพาะเมื่อคลิกปุ่ม ไม่ใช่เมื่อคลิกที่พื้นหลัง:

คำตอบ #1

เหมือนที่เราได้สรุปไว้ในความคิดเห็น หนึ่งวิธีในการแก้ปัญหานี้คือการเพิ่มเนื้อหาเปล่าลงในโมดัล โดยผูกเหตุการณ์การคลิกของเนื้อหากับเมธอด closeModal แล้วจากนั้นตั้งพื้นหลังของเนื้อหาให้เป็น โปร่งใส

<ion-content tappable (click)="closeModal()">
</ion-content>
<ion-footer>
    <ion-navbar>
        <h4>Modal</h4>
        <p>I'm a Modal</p>
        <button ion-button (click)="closeModal()">Close Modal</button>
    </ion-navbar>
</ion-footer>

และในสไตล์ของคอมโพเนนต์:

ion-content div.scroll-content {
    background-color: transparent;
}

คำตอบ #2

หากใครกำลังมองหาวิธีแก้ปัญหาสำหรับ Ionic 5 ให้วางตัวอย่างนี้ไว้ในไฟล์ global.scss ของคุณ

.my-custom-modal-css .modal-wrapper {
    height: 50%;
    width: 80%;
    position: absolute; 
 }

.modal-shadow{
    display: none;
}

อย่าลืมเพิ่มคลาส CSS "my-custom-modal"

const modal = await this.modalController.create({
  component: LocationqrviewPage,
  cssClass: 'my-custom-modal-css',
  backdropDismiss: true
});
return await modal.present();