Pass Modal a customized ClassName

I need open two Modal in one page. I’d like to have one customized to have smaller size without affecting another one

I could overwrite “modal” class but it will become global. Is there a way to attach new class to “ion-modal” component when creating a new Modal?

 <ion-modal _ngcontent-gry-28="" class="modal-cmp modal" style="z-index: 9999;"><ion-backdrop disable-activated="" disablescroll="false" role="presentation" tappable="" style="opacity: 0.4;"></ion-backdrop><div class="modal-wrapper" style="opacity: 1; transform: translateY(0px);"><div></div><ion-modal-inner _ngcontent-gry-34="">
1 Like

Hi Zhengying,

Did you find an answer to this? We are also looking for a solution to customize the size and look of individual modals.


No I didn’t. I guess we need feature request via github

Hello any update on is. I was thinking passing a different class in variable.scss might do the trick