文章/答案/技术大牛

发布

社区首页 >问答首页 >模式不取消在背景点击

问模式不取消在背景点击
EN

Stack Overflow用户

提问于 2018-06-28 10:30:40

回答 1查看 1.3K关注 0票数 2

我有一个模式，当一个按钮被点击时会弹出，但是即使我将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

Stack Overflow用户

回答已采纳

发布于 2018-06-28 10:50:32

您可以通过以下方式处理后退按钮单击事件，修改您的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();
        }
      });
    });
  }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51080633

复制

相似问题

问模式不取消在背景点击
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模式不取消在背景点击EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模式不取消在背景点击
EN