CODEWITHSUNDEEP
javascriptangulartypescriptionic-frameworkionic3
jraspante
jraspante

Reputation: 228

Show a modal on a modal, but the second modal is closing itself. IONIC 3

I am using Ionic 3 and I'm trying to open a modal on another modal. The first modal shows a form that is already filled and if the user wants to erase all the data, it will open another modal asking for a justification. The second modal is closing itself without any click or user interaction.

What could be causing this error?

The first modal is called here:

Calendario.ts

openEvento(evento){
      let modal = this.modal.create(EventoPage, {'evento': evento, 'isNewEvent': false }, {cssClass: "modalevento"});
      modal.present();
}

Inside the Evento.ts I call the second modal.

private deletarEvento() {
        let modal = this.modal.create(JustificativaPage, {}, { cssClass: 'modal-justificativa'});
        modal.onDidDismiss(data => {
            console.log(data);
        })
        modal.present();
}

The JustificativaPage show and close itself. Here is the code for JustificativaPage.ts

export class JustificativaPage{
    private justificativa: string = "";
    constructor(private viewCtrl: ViewController){}
    solicitar(){
        if(this.justificativa == ""){ }
        else{
            console.log(this.justificativa)
            this.viewCtrl.dismiss(this.justificativa);
        }        
    }
    modalDismiss(){
        this.viewCtrl.dismiss();
    }
}

JustificativaPage.html

<ion-header>
    <ion-label>Deseja Solicitar Cancelamento?</ion-label>
     <button class="dismiss-button" (click)="modalDismiss()">
            <ion-icon name="ios-close-outline"></ion-icon>
        </button>
</ion-header>

<ion-content padding>
    <h5>Digite abaixo o motivo do cancelamento</h5>
    <form (ngSubmit) = "solicitar()">
        <ion-item>
            <ion-label stacked>Justificativa</ion-label>
            <ion-textarea [(ngModel)]="justificativa" name="justificativa" placeholder="Digite aqui o motivo do cancelamento do evento"></ion-textarea>
        </ion-item>
        <button ion-button color="danger">Fechar</button>
        <button type="submit" ion-button color="primary">Solicitar</button>
    </form>
</ion-content>

Upvotes: 0

Views: 1594

Answers (1)

Sandy.....
Sandy.....

Reputation: 2870

You have to update your code by adding the enableBackdropDismiss option when creating the modal as follows:

let modal = this.modal.create(EventoPage, {'evento': evento, 'isNewEvent': false }, { enableBackdropDismiss: false, cssClass: "modalevento"});
let modal = this.modal.create(JustificativaPage, {}, { enableBackdropDismiss: false, cssClass: 'modal-justificativa'});

For more details, please find this docs link https://ionicframework.com/docs/api/components/modal/ModalController/#advanced

Please note that when multiple modals are opened, they get appended to DOM. So which modal you open first, that will get appended to DOM first.

Also, all modals have same css, hence the later modal get hidden behind first modal.

You need to customize the modals by overriding their default CSS(i.e. z-index) for each modal so that in whatever order they are opened, the last modal will open over previously opened modal.

Upvotes: 2

Related Questions