Close Modal with Button

Ionic Framework ionic-v3
1

hi yall
How do i close modal using a button.
This is my button:

<button ion-button icon-only (click)="closemodal()">
    <ion-icon name="close"></ion-icon>
  </button>

and this is my modal:
presentModal() {
let modal = this.modalCtrl.create({

  buttons: [  {
      text: 'Cancel',
      role: 'cancel', // will always sort to be on the bottom
      icon: !this.platform.is('ios') ? 'close' : null,
      handler: () => {
        console.log('Cancel clicked');
      }
    } ]
});
modal.present();

}

1 Like
2

Hey!
You can use dismiss on ViewController of modal.
For more Read This

3

Dismiss requires me to work in the ts file and inside the modal.The design of my modal and button are on different pages but appearing on same modal.So what ive done now is used pop instead.I hope this does not affect funtionality on other devices.

This is what i did**:The Moda ts filel**

presentModal() {
let modal = this.modalCtrl.create({

  buttons: [  {
      text: 'Cancel',
      role: 'cancel', // will always sort to be on the bottom
      icon: !this.platform.is('ios') ? 'close' : null,
      handler: () => {
        console.log('Cancel clicked');
      }
    } ]
});
modal.present();

}
then i added this outside the modal function:
goBack() {
this.navCtrl.pop();
}
then on the button appearing in the modal i called the goBack function like so:

<button ion-button icon-only (click)="goBack()">
2 Likes
4

In modal.html:

    <ion-header>
        <ion-navbar>
            <ion-title>Now for something completely different...</ion-title>
            <ion-buttons end>
                <button ion-button icon-only (click)="closeModal()">
                    <ion-icon item-right name="ios-close-outline"></ion-icon>
                </button>
            </ion-buttons>
        </ion-navbar>
    </ion-header>

in modal.ts:

    closeModal() {
        this.navCtrl.pop();
    }
7 Likes
5

For anyone still wondering, i just found a better solution that doesnt require pop() and you use it in your modal closeModal() { this.modalController.dismiss(); }

and of course you need to import the modal controller on your modal component
import { ModalController, NavParams} from '@ionic/angular';

3 Likes