CODEWITHSUNDEEP
angularionic-frameworkionic3
Bolu Okunaiya
Bolu Okunaiya

Reputation: 129

Modal doesnt dismiss on backdrop click

I have a modal that pops up when a button is clicked but it doesn't dismiss on backdrop click even when i set enableBackdropDismiss = true and showBackdrop as true too. i also tried adding a function that dismiss the modal to the background but still no result

Code Below:

Modal:

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

MAIN PAGE:

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.");

});

Upvotes: 2

Views: 1503

Answers (1)

Mangesh Daundkar
Mangesh Daundkar

Reputation: 1046

You can handle back button click event in following way, Modify your app.component.ts file. 

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

Upvotes: 1

Related Questions