angular - Ionic 2: Modal lukker ikke når man klikker på bakgrunnen

Jeg prøver å kjøre en enkel eksempelapp med en modal som kun dekker den nedre delen av skjermen. Jeg vil at modalen skal lukkes når jeg klikker på bakgrunnen, noe jeg tror er forventet oppførsel. Men ingenting skjer når jeg klikker på bakgrunnen. Jeg kjenner til enableBackdropDismiss som bør være sant som standard. Jeg bruker Ionic-angular 3.2.1.

Hjemmeside :

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>

Modale :

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>

Slik ser det ut når modalen vises. Modalen lukkes kun når man klikker på knappen, ikke når man klikker på bakgrunnen:

Svar #1

Akkurat som vi fant ut i kommentarene, en måte å løse dette på ville være å legge til et tomt innhold i modalen, binde klikkhendelsen på innholdet til closeModal-metoden, og deretter sette bakgrunnen til innholdet til å være gjennomsiktig

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

Og i komponentstilene:

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

Svar #2

Hvis noen leter etter en løsning for Ionic 5. Plasser denne eksempelfilen inne i din global.scss

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

.modal-shadow{
    display: none;
}

Ikke glem å legge til CSS-klassen "my-custom-modal".

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

Relaterte artikler