I did not find a way or a configuration that changes the size of the
ModalController. I want however to use it on deverse sizes, namely to
specify a different size on each page I use it.
Every time a page is shown, a class with the name of the Component of that page is added to the <ion-page> element. For instance, if I create a new Component to use as a Modal called CustomModalPage you will see that in your html a custom-modal-page class is added.
<ion-page class="show-page custom-modal-page "> ... </ion-page>
You can use that class to change the style of a given modal without affecting the rest of modals of the app. Please notice that this is just a workaround that I've found, and I'm not sure if it could break something else somehow.
First I created a page with two buttons, one will open the custom modal, and the other one, just a default modal.
The .html code:
<ion-header>
<ion-navbar>
<ion-title>ModalController Demo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h5>ModalController with custom size</h5>
<button (click)="presentCustomModal()">Open Custom Modal</button>
<button (click)="presentDefaultModal()">Open Default Modal</button>
</ion-content>
The .ts code:
import { Component } from '@angular/core';
import { NavController, ModalController, ViewController } from 'ionic-angular';
@Component({
templateUrl: 'build/pages/modal-controller-custom-size/modal-controller-custom-size.html',
})
export class ModalControllerCustomSizePage {
constructor(private navCtrl: NavController, private modalCtrl: ModalController) {
}
presentCustomModal() {
let customModal = this.modalCtrl.create(CustomModalPage);
customModal.onDidDismiss(() => {
// Do what you want ...
});
// Present the modal
customModal.present();
}
presentDefaultModal() {
let defaultModal = this.modalCtrl.create(DefaultModalPage);
defaultModal.onDidDismiss(() => {
// Do what you want ...
});
// Present the modal
defaultModal.present();
}
}
/* ********************
Custom modal
********************* */
@Component({
template: '<ion-header>' +
'<ion-navbar dark>' +
'<ion-title>My custom modal</ion-title>' +
'<ion-buttons end>' +
'<button (click)="dismiss()">Close</button>' +
'</ion-buttons>' +
'</ion-navbar>' +
'</ion-header>' +
'<ion-content padding>' +
'<h5>Modal content...</h5>' +
'</ion-content>',
})
class CustomModalPage {
constructor(public viewCtrl: ViewController) {
}
public dismiss() {
this.viewCtrl.dismiss();
}
}
/* ********************
Default modal
********************* */
@Component({
template: '<ion-header>' +
'<ion-navbar>' +
'<ion-title>Default modal</ion-title>' +
'<ion-buttons end>' +
'<button (click)="dismiss()">Close</button>' +
'</ion-buttons>' +
'</ion-navbar>' +
'</ion-header>' +
'<ion-content padding>' +
'<h5>Modal content...</h5>' +
'</ion-content>',
})
class DefaultModalPage {
constructor(public viewCtrl: ViewController) {
}
public dismiss() {
this.viewCtrl.dismiss();
}
}
Please notice that I've included the two components I use as Modals in the same .ts file just to make this easier to read.
Once we have that, we can change the styles of the custom modal by adding some style rules like this:
.custom-modal-page {
height: 25%;
position: absolute;
top: 75%;
ion-content {
background-color: #333;
color: #eee;
}
}
Like you can see, those styles are going to be applied only to the custom modal and not the default one. And since we're not modifying the modal-wrapper but we do modify its content, the modal-wrapper will disable the rest of the page until we close the modal.
