模态不会在背景点击时关闭答案

【问题标题】：Modal doesnt dismiss on backdrop click模态不会在背景点击时关闭
【发布时间】：2018-06-28 10:30:40
【问题描述】：

我有一个模式，当单击按钮时会弹出，但即使我将 enableBackdropDismiss = true 和 showBackdrop 也设置为 true，它也不会在背景单击时关闭。我还尝试添加一个功能，将模式解除到后台，但仍然没有结果

代码如下：

模态：

HTML：

<div class="sample-modal-page">



  <ion-list style="line-height: 20px;
  width: 272px;
  height: 398px;
  background: white;
  margin-left: 13%;
  overflow: auto;
  margin-top: 42%;" >
  <ion-item>
      <h1 style="font-size: smaller;
      text-align: center;"> Select a category</h1>
    </ion-item>
    </ion-list>




  </div>

CSS：

modaltest {
.sample-modal-page {
    padding: 30px;
    background: rgba(0,0,0,0.5);
}
.center {
    margin: auto;
    width: 50%;
    padding: 10px;
}

.menu-item{
height:60px;
line-height:60px;
display:block;
transition:all 350ms ease;  
}
}

主页：

openModal() {

const myModalOptions: ModalOptions = {
  enableBackdropDismiss: true,
  showBackdrop:true
};




const myModal: Modal = this.modal.create(ModaltestComponent,myModalOptions);

myModal.present();

myModal.onDidDismiss((data) => {
  console.log("I have dismissed.");

});

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

您可以通过以下方式处理后退按钮单击事件，修改您的app.component.ts 文件。

  import { Platform, IonicApp } from 'ionic-angular';

  constructor(public platform: Platform, private ionicApp: IonicApp){}

  initializeApp() {
    this.platform.ready().then(() => {
      //back button handle
      this.platform.registerBackButtonAction(() => {
        let activePortal = this.ionicApp._loadingPortal.getActive() ||
          this.ionicApp._modalPortal.getActive() ||
          this.ionicApp._toastPortal.getActive() ||
          this.ionicApp._overlayPortal.getActive();

        if (activePortal) {
          activePortal.dismiss();
        }
      });
    });
  }

【讨论】：