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

时间:2018-06-28 10:30:41

标签: angular ionic-framework ionic3

我有一个模态,单击按钮时会弹出,但是即使我将enableBackdropDismiss = true且showBackdrop也设置为true,它也不会在背景单击时消失。我还尝试添加一个功能,以消除背景的模态,但仍然没有结果

下面的代码:

模式:

HTML:

=IF(OR(TODAY()=WORKDAY(EOMONTH(TODAY(),-1),1,0),TODAY()=WORKDAY(EOMONTH(TODAY(),-1),2,0)),"Yes","No")

CSS:

<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>

主页面:

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;  
}
}

1 个答案:

答案 0 :(得分: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();
        }
      });
    });
  }