Ionic 4 modal backdrop

Ionic Framework
1

I want to disable modal dismiss when you click outside the modal. I’ve tried many different examples but didn’t work.

async openExtras(){
let modal = await this.modalCtrl.create({
component: ExtrasPage,
cssClass: ‘extras’
});
modal.present();
}

2

You can provide a Value backdropDismiss for this. See: https://ionicframework.com/docs/api/modal#properties

3

i tried that but failed. I don’t know if there’s something wrong I did but it didn’t work the way I wanted it to.
The backdropDismiss property dismisses the modal if it’s value is true and the opposite if it’s false. if you click outside the modal it still dismisses, which is what i want to disable.

4

this Sounds like an Issue. You should describe and submit this here

5

In my case I have applications that have the same behavior that you want to apply.

I have a function to be able to open any Modal by sending the component (in this case the Modal) and the backdropDismiss (which in this case true is if you want that when playing outside it will generate the Dismiss or false if you don’t want it to generate the Dismiss at the time of clicking outside this).

The code is the following:

openModalWithoutData(componente: ComponentRef, backDrop: boolean) {
    this.modalController.create({
      component: componente,
      animated: true,
      showBackdrop: true,
      backdropDismiss: backDrop
    }).then(modal => {
      modal.present();
    });
  }// End fuction openModalWithoutData()

And the way in which it is applied is as follows:

this.openModalWithoutData(ChatComponent, false);

I hope to be helpful

6

Do I do anything in the html page?

7

I only added the showBackdrop and backdropDismiss, it works thanks

async openExtras(){
let modal = await this.modalCtrl.create({
component: ExtrasPage,
cssClass: ‘extras’,
showBackdrop: true,
backdropDismiss: false
});
modal.present();
}

1 Like