Disable Parent page click when Modal is Open

Ionic Framework ionic-v3
1

When I launch a Modal and when I click outside the modal it hides closes modal.
How do I disable auto closing of modal?

In Ionic1 we could pass backdropClickToClose: false option to the IonicModal.
How do I do this in Ionic2?

2

Please take a look at the docs, as this is mentioned in there.

http://ionicframework.com/docs/v2/2.0.0-beta.10/api/components/modal/Modal/#create

3

I found the information this morning in the Modal.js code. (All way along I was looking at doc at http://ionicframework.com/docs/v2/components/#modals which does not provide all the information I needed) Now I know that I have to use documentation for beta release.

4

The Component Docs and API docs are different.

The Component docs (what you linked to) show a high level overview of each component.

The API docs (what I linked to) show a low level overview and the methods available to each component.

6

Modal does not close when I use a API call before I call the dismiss(). All the data I return from modal get to page from where Modal was launched but Modal stays open. Without the API call the modal closes. Not sure what I am doing wrong…

onReAuthenticate(): void {

if (this.reAuthPassword != null) { 
  let reAuthUrl = this.appConfig.getReAuthLoginAPIUrl();
  let reAuthheader = this.appConfig.apiAppId + this.appConfig.apiAppKey +  'userid:'  + this.loggedUser + '|passwd:' + this.reAuthPassword + '|' +   this.appConfig.apiCompanyCode ;

  let loading = Loading.create({
    spinner: 'circles',
    showBackdrop: true
    //content: 'Authentication in progress, Please Wait...'
  });
  this.nav.present(loading);
  this.authService.doReAuthLogin(reAuthheader, reAuthUrl) //call doLogin from AemesAuthService webservice provider
      .subscribe( // Successful login response
         response => {
         loading.dismiss();
         this.sharedAuthDataService.appToken = response.Token;
         **this.viewCtrl.dismiss(response.Token);**                  
       },
       error => { // login failure                
         loading.dismiss();
         this.authAttemptsCount = this.authAttemptsCount + 1;

         if (this.authAttemptsCount < 2) {
           this.showErrorAlert('Authentication failed!','Invalid password attempts(' + this.authAttemptsCount + ')'); 
         } else 
         if (this.authAttemptsCount = 2) {
           this.showErrorAlert('Authentication failed!','Invalid password attempts(' + this.authAttemptsCount + ')'); 
           this.nav.popToRoot();
         }        
       })
} else {
  this.showErrorAlert('Invalid Password','Password cannot be empty');
}

}

7

I noticed that when you have Loading component in the Modal does not work properly.
In my code if I remove loading.dismiss() the modal closes without any issue.

8

I got that issue too, I think there should be a Promise to take care of the closing animation then you can continue handling the navigation safely, like Alert does:

let alert = Alert.create({
  title: 'Error!',
  subTitle: 'Error message here',
  buttons: [
    {
      text: btn,
      handler: () => {
        alert.dismiss().then(() => {
          nav.pop();
        });
        return false;
      }
    }
  ]
});
nav.present(alert);
9

hey i want to prevent close dialog on back button press. how i do that.?
i used showDrop:true and showDrop:false… but when i click on back button my loading was stopeed.