Ionic2 no-fullscreen modal

[jalef]

Hey
I would like to open a modal, but not fullscreen, with a transparent grey layer around it.
Is it possible??
Thanks

[iignatov]

@jalef

I would like to open a modal, but not fullscreen, with a transparent grey layer around it.

It’s possible but not supported by default, i.e. some customizations are required (details in the linked post):

Custom modal / alert (with HTML, form...)

@zareone Ah okay, well I thinks it’s definitely possible. Since the modal acts as a page, you can style the page to be a little bit smaller with padding on the modal. Then set the background color equal to your example, something like rgba(0,0,0,0.85). Add some border radius and you can get there I suppose! I just played with it in the component docs and it took me about 5 minutes to create something like this: [image] Of course you can style it in any way you want. I didn’t test it across r…

[zhengying]

I’m looking for similar solution. Is it possible to customize it like POPUP or ALERT window. I like this page/window flow over parent page with transparency.

[chandroiud]

Hello guys, use this scss to add the transparent background, This also shows the modal 50% of the screen:

ion-page.modal {
  padding: 30px;
  background: rgba(0,0,0,0.5);
}
.disabledfeature{
  color: #8f8f8f;
}

[zhengying]

@chandroiud

ion-page.modal {
padding: 30px;
background: rgba(0,0,0,0.5);
}
.disabledfeature{
color: #8f8f8f;
}

This works well! Thanks!

[chandroiud]

Ignore or remove the .disabledfeature class its not required.

[xr0master]

BTW it’s not true, that it’s not supported by default. You can see it on tablets.

[chandroiud]

I haven’t checked on tablets but i have tested it on android and iOS devices itt works. What is the issue you are facing?

[jalef]

The problem with this solution is that I don’t need this for all the modals of my applicationl. Some open fullscreen, and some don’t. Any ideas on this???

Thanks!