How to prevent modal dismiss when clicked outside the modal in Ionic?

Question

I'm building a simple mobile app that passes data between a homepage and a modal page. While it works great on mobile, on a large screen, the modal doesn't fill the whole screen. So the user is able to click outside the screen to dismiss the modal which doesn't trigger any of my functions that that are supposed to trigger on modal dismiss. My question is, how do a disable clicking outside the modal. I don't want the modal to dismiss on click outside, but only when my "close" button is clicked. My modal is set up as:

On HomePage:

open(){
    let modal = this.modalCtrl.create(ModalPage,
        {
            firstName: this.user.firstName,
            lastName: this.user.lastName,
            location: this.user.location
        });
    modal.onDidDismiss(data => {
            this.user.firstName = data.firstName;
            this.user.lastName = data.lastName;
            this.user.location = data.location;
    });
    modal.present();
}

On ModalPage:

closeModal() {
    let data = {
        firstName: this.user.firstName,
        lastName: this.user.lastName,
        location: this.user.location
    }
    this.viewCtrl.dismiss(data);
}

I feel like this should be something very simple, but I can't find any resources online, and the Ionic 2 Doc isn't very clear. Please help.

Answer 1

Make use of the enableBackdropDismiss-option when creating the modal (link to docs).

let modal = this.modalCtrl.create(ModalPage, { data: data }, { enableBackdropDismiss: false });

ionic 4

const modal = await this.modalCtrl.create({
  component: ModalPage,
  componentProps: {
    'data': this.data 
  },
  backdropDismiss:false
});

Answer 2

For ionic 4

backdropDismiss:false,

the model should be created like this

 const modal = await this.modalCtrl.create({
      component: SetaddresComponent,
      cssClass: 'my-custom-modal-css',
      componentProps: { },
      showBackdrop:true,
      backdropDismiss:false,
    },