Ionic 3 Custom Modal

Ionic Framework ionic-v3
1

Is there any way to customize modal for a specific page only? I have found some solutions but they all need the styles to be applied globally since the modals live outside of page components. But if I do that then the same styles will be applied to all other modals irrespective of the page components. Is there any way to solve this?

This is the style that I use

ion-modal { @media (min-height: 500px) { ion-backdrop { visibility: visible; } } position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: $z-index-overlay; display: flex; align-items: center; justify-content: center; contain: strict; .modal-wrapper { &, .ion-page, .ion-page .content, .ion-page .content .scroll-content { contain: content; position: relative; top: auto; left: auto; } z-index: $z-index-overlay-wrapper; display: flex; overflow: hidden; flex-direction: column; min-width: $alert-min-width; max-height: $alert-max-height; opacity: 0; height: auto; max-width: $alert-md-max-width; border-radius: $alert-md-border-radius; background-color: $alert-md-background-color; box-shadow: $alert-md-box-shadow; .ion-page .content { background-color: $background-color; } } ion-item { p { text-overflow: unset; overflow: visible; } } ion-label { overflow: visible; text-overflow: unset; white-space: normal; } .title { font-weight: bold; } .selected-card { border: 3px solid #488aff; } }

I am going crazy over this. So please any help is much appreciated.
Thank you

2

You can pass a cssClass when creating a modal, like this::
let modal = this.modalCtrl.create(OrdercreateModal, undefined, { cssClass: 'modal-fullscreen' });

Then you can create a cssClass in app.scss with your css.
This will apply the css only to the modal that are created with the cssClass parameter.

3

Thank you for the quick response. I will try that .