Ionic 2: Modal doesn't close when clicking on backdrop

user_4955908 0
Viewed 4737

I'm trying to run a simple example app with a modal that covers only the lower part of the screen. I want the modal to close when I click on the backdrop which I think is expected behavior. However, nothing happens when clicking the backdrop. I know about enableBackdropDismiss which should be true by default. I'm using Ionic-angular 3.2.1.

Homepage: 

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>

Modal:

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>

This is what it looks like when the modal is shown. The modal only closes when clicking the button, not when clicking the background:

enter image description here

ionic2 ionic3 angular typescript
3 Answers

If someone is looking for a solution for Ionic 5. Place this Sample inside your global.scss

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

.modal-shadow{
    display: none;
}

Dont forget to add "my-custom-modal" css class.

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

There is only css problem.

please add to the app.scss

@media not all and (min-height: 600px) and (min-width: 768px) {
  ion-modal ion-backdrop {
    visibility: visible;
  }
}

this snippet will display your backdrop (it's hidden for small screens)

and 

.modal-wrapper {
  width: 70%;
  height: 70%;
  position: absolute;
  margin-top: 25%;
  left: 15%;
}

to set your modals not full-width and height sized (by default) and it should be absolutely positioned for avoiding problems on iOS devices, which will render backdrop front of modal.

BTW you shouldn't now place your content inside the - it's not really good practice. But in this case you can set modal position as you wish and use all needed elements and rules without header or footer restrictions.

user_99073760
Related