Ionic 3 - I want a modal screen not full size - ionic-framework

Question

I need a modal page with no full size (80% width, <60% height, centered) to select some items, like an alert control.
How to implement the CSS for this case?

Answer 1

Initialize modal with cssClass
let modal = this.modalCtrl.create(CustomSelectPage, {data: data}, {cssClass: 'select-modal' });
Then add CSS to the class in app.scss
.select-modal {
background: rgba(0, 0, 0, 0.5) !important;
padding: 20% 10% !important;
}
Change the numbers according to your design.

Answer 2

put this code only in your component css file
::ng-deep .sc-ion-modal-md-h {
--width: 90%;
--height: 70%;
}

Answer 3

in TS file:
async MyModal() {
const modal = await this.modalController.create({
component: MyModalPage,
backdropDismiss: true,
cssClass: 'my-modal',
});
return await modal.present();
}
in SCSS file:
.my-modal {
--width: 70%;
--height: 35%;
}

Answer 4

Assign a class to modal (ionic-4 & ionic-5)
this.modalCtrl
.create({
component: ReportEventComponent,
cssClass: 'add-contact-modal'
})
.then(modalEl => {
modalEl.present();
return modalEl.onDidDismiss();
});
put your css code into global.css file
ion-modal.add-contact-modal {
--height: 85%;
--width: 90%;
}

Answer 5

I'm on Ionic 6 and it worked here.
Add in global.scss:
.premio-modal{
// background-color: red;
.modal-wrapper{
background: rgba(0, 0, 0, 0.5) !important;
/* padding: 20% 10% !important; */
width: 70%;
height: 75%;
border-radius: 5px;
}
}
In component:
async showModal(){
const modal = await this.modalController.create({
component: YourComponent,
cssClass: 'premio-modal',
backdropDismiss: true,
});
modal.onDidDismiss().then(
(m: any) => {
}
);
return await modal.present();
}