I have problem with modal controller in ionic

Issue

I'm using the ModalController to present a small card. This card has a skip and a start button. I want this popup to be dismissed only when pressing skip and start button but currently when pressing outside of the popup area it is also dismissed.

This is the UI:

Solution

In order to do that you'd need to set the backdropDismiss property to false.

From Ionic docs (https://ionicframework.com/docs/api/modal#properties):

backdropDismiss: If true, the modal will be dismissed when the backdrop is clicked

Example:

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';

@Component({
  selector: 'modal-example',
  templateUrl: 'modal-example.html',
  styleUrls: ['./modal-example.css']
})
export class ModalExample {
  constructor(public modalController: ModalController) { }

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      backdropDismiss: false, // <----- here!
    });
    
    return await modal.present();
  }
}

Answered By - sebaferreras