Using AlertControllers in Ionic:
To customize the behavior of your alerts, refer to the official documentation. One key option is enableBackdropDismiss, which controls whether tapping on the backdrop should dismiss the alert:
enableBackdropDismiss: Set this boolean value to determine if tapping outside the alert should close it (default: true)
import { AlertController } from 'ionic-angular';
// ...
export class MyPage {
constructor(public alertCtrl: AlertController) {}
showAlert() {
let alert = this.alertCtrl.create({
title: 'New Message!',
subTitle: 'You have received a new message.',
buttons: ['OK'],
enableBackdropDismiss: false // <- Customize here! :)
});
alert.present();
}
}
Update for Ionic 5:
In newer versions like Ionic 5, check out this resource for changes. The property to achieve the same effect has been altered to backdropDismiss:
backdropDismiss: When set to true, clicking on the background will close the alert.
import { AlertController } from '@ionic/angular';
//...
export class MyPage {
constructor(public alertController: AlertController) {}
async showAlert() {
const alert = await this.alertController.create({
header: 'Important Alert',
subHeader: 'Details',
message: 'Please read this message carefully.',
buttons: ['OK'],
backdropDismiss: false // <- Update made here! :)
});
await alert.present();
}
}