In my search, I have not come across any way to change the size of the ModalController through configuration settings. However, I do want to use it with varying sizes, such as specifying a different size for each page where it is used.
Each time a page is displayed, a class named after the Component of that page is appended to the <ion-page> element. For example, if a new Component called CustomModalPage is created to be used as a Modal, you will notice that a custom-modal-page class is added to the HTML.
<ion-page class="show-page custom-modal-page "> ... </ion-page>
This class can be utilized to customize the style of a specific modal without affecting other modals in the application. Please bear in mind that this is just a workaround I discovered, and there may be potential risks associated with it.
To demonstrate, I first developed a page containing two buttons – one to open a custom modal and another to open 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(() => {
// Perform actions upon dismissal...
});
// Display the custom modal
customModal.present();
}
presentDefaultModal() {
let defaultModal = this.modalCtrl.create(DefaultModalPage);
defaultModal.onDidDismiss(() => {
// Perform actions upon dismissal...
});
// Present the default 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();
}
}
I have included both components used as Modals in the same .ts file for easier readability.
Subsequently, we can adjust the styles of the custom modal by defining some CSS rules like the following:
.custom-modal-page {
height: 25%;
position: absolute;
top: 75%;
ion-content {
background-color: #333;
color: #eee;
}
}
As shown, these styles only affect the custom modal and not the default one. By modifying the content within the modal-wrapper but not the wrapper itself, the rest of the page remains disabled until the modal is closed.