Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

ModalController

Improve this doc

A Modal is a content pane that goes over the user's current page. Usually it is used for making a choice or editing an item. A modal uses the NavController to present itself in the root nav stack. It is added to the stack similar to how NavController.push works.

When a modal (or any other overlay such as an alert or actionsheet) is "presented" to a nav controller, the overlay is added to the app's root nav. After the modal has been presented, from within the component instance, the modal can later be closed or "dismissed" by using the ViewController's dismiss method. Additionally, you can dismiss any overlay by using pop on the root nav controller. Modals are not reusable. When a modal is dismissed it is destroyed.

Data can be passed to a new modal through Modal.create() as the second argument. The data can then be accessed from the opened page by injecting NavParams. Note that the page, which opened as a modal, has no special "modal" logic within it, but uses NavParams no differently than a standard page.

Usage

import { ModalController, NavParams } from 'ionic-angular';

@Component(...)
class HomePage {

 constructor(public modalCtrl: ModalController) { }

 presentProfileModal() {
   const profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
   profileModal.present();
 }

}

@Component(...)
class Profile {

 constructor(params: NavParams) {
   console.log('UserId', params.get('userId'));
 }

}

Instance Members

config

create(component, data, opts)

Create a modal to display. See below for options.

Param Type Details
component object

The Modal view

data object

Any data to pass to the Modal view

opts object

Modal options

Advanced

Option Type Description
showBackdrop boolean Whether to show the backdrop. Default true.
enableBackdropDismiss boolean Whether the popover should be dismissed by tapping the backdrop. Default true.
cssClass string Additional classes for custom styles, separated by spaces.

A modal can also emit data, which is useful when it is used to add or edit data. For example, a profile page could slide up in a modal, and on submit, the submit button could pass the updated profile data, then dismiss the modal.

import { Component } from '@angular/core';
import { ModalController, ViewController } from 'ionic-angular';

@Component(...)
class HomePage {

 constructor(public modalCtrl: ModalController) {

 }

 presentContactModal() {
   let contactModal = this.modalCtrl.create(ContactUs);
   contactModal.present();
 }

 presentProfileModal() {
   let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
   profileModal.onDidDismiss(data => {
     console.log(data);
   });
   profileModal.present();
 }

}

@Component(...)
class Profile {

 constructor(public viewCtrl: ViewController) {

 }

 dismiss() {
   let data = { 'foo': 'bar' };
   this.viewCtrl.dismiss(data);
 }

}

A common issue is that a developer may try to implement navigation in a modal, but when you try NavController.push(), you will notice that the status bar on iOS gets cut off. The proper way to implement navigation in a modal is to make the modal component a navigation container, and set the root page to the page you want to show in your modal.

@Component({
  template: '<ion-nav [root]="rootPage" [rootParams]="rootParams"></ion-nav>'
})
export class MyModalWrapper {
  rootPage = 'MyModalContentPage'; // This is the page you want your modal to display
  rootParams;

  constructor(navParams: NavParams, private viewCtrl: ViewController) {
      this.rootParams = Object.assign({}, navParams.data, {viewCtrl: viewCtrl});
      // This line will send the view controller into your child views, so you can dismiss the modals from there.
  }
}

Sass Variables

Property Default Description
$modal-inset-min-width 768px

Min width of the modal inset

$modal-inset-min-height-small 600px

Minimum height of the small modal inset

$modal-inset-min-height-large 768px

Minimum height of the large modal inset

$modal-inset-width 600px

Width of the large modal inset

$modal-inset-height-small 500px

Height of the small modal inset

$modal-inset-height-large 600px

Height of the large modal inset

Property Default Description
$modal-ios-background-color $background-ios-color

Background color for the modal

$modal-ios-border-radius 10px

Border radius for the modal

Property Default Description
$modal-md-background-color $background-md-color

Background color for the modal

$modal-inset-box-shadow-color rgba(0, 0, 0, .4)

Box shadow color of the alert

$modal-inset-box-shadow 0 28px 48px $modal-inset-box-shadow-color

Box shadow of the alert

Property Default Description
$modal-wp-background-color $background-wp-color

Background color for the modal

Related

Modal Component Docs

API

Native

General