如何在Ionic中点击弹窗外部时不关闭弹窗

Question

我正在构建一个ionic 2应用程序，并使用以下组件

http://ionicframework.com/docs/components/#alert

  import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }
}

我该如何确保当我点击框外时，警告框不会消失？

- hopper

Answer 1

Ionic 2/3:

你可以在AlertController文档中看到，创建警报时可以使用enableBackdropDismiss（布尔值）选项：

enableBackdropDismiss：指定单击背景是否应关闭警报。默认为 true。

import { AlertController } from 'ionic-angular';

// ...
export class MyPage {

  constructor(public alertCtrl: AlertController) {}

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK'],
      enableBackdropDismiss: false // <- Here! :)
    });

    alert.present();
  }
}

Ionic 4/5:

在Ionic 4/5中，这个属性被重命名为 backdropDismiss：

backdropDismiss: 如果为 true，则当单击背景时，警告框将被关闭。

import { AlertController } from '@ionic/angular';

//...
export class MyPage {

  constructor(public alertController: AlertController) {}

  async showAlert() {
    const alert = await this.alertController.create({
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: ['OK'],
      backdropDismiss: false // <- Here! :)
    });

    await alert.present();
  }
}

- sebaferreras

---

在 Ionic 4 中，'backdropDismiss: false'。 - Pradip Vadher

感谢@PradipVadher，我已更新答案，包括与Ionic 4相关的信息 :) - sebaferreras

Answer 2

在 Ionic 4 中，该选项已更名为：

backdropDismiss: false

- Pete

---

添加一些更多的细节 - Paras Korat

不确定您需要什么额外的细节，接受的答案对于早期版本的Ionic是有效的，在最新的Ionic 4上，该参数已从enableBackdropDismiss重命名为backdropDismiss。 - Pete

@Pete是正确的，对于使用IONIC 4的人，你将不得不使用这个选项。 - Gene Lim

你太棒了！帮我省了几分钟的时间 :) - Martins

Answer 3

在alertCtrl.create选项中设置enableBackdropDismiss: false。

- amuramoto