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

Hi ionites!

Iā€™m working in a new mobile app with Ionic 2, and Iā€™m trying to get something like this.

Basically, what I need is a modal that lets the user see a bit of the page under it in the edges, without occupying 100% of space, similarly to what the alert does.

Any ideas on how to get this effect?

Thanks in advance!

Dani

5 Likes

Hi, isnā€™t it a possibility to use an Alert and style it to your likings?

1 Like

Hi luukschoen!

Thanks for your reply!

That was one of my first thoughts, too. But Iā€™m not sure if it will do.

Looking at the API docs for the Alert component, I see it lets you add some input fields and buttons, but Iā€™m not sure how Iā€™ll add a custom image, a slider, or any other nested components, that would be no problem in a modal page.

I think the app has some views that are maybe ā€œtoo sophisticatedā€ to be alerts.

@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:

Of course you can style it in any way you want. I didnā€™t test it across real devices since that takes a little timeā€¦ Can you work with this?

8 Likes

Wow! Thank you very much! It looks so obvious now I feel stupid :smiley:

So, all the pages in the navigation stack are actually stacked in the UI (I thought only the current one was really there in the viewport)

Iā€™ll try it tomorrow, but looks promising.

Thanks a lot!

It is wrong. Modal are stacked in the UI, but page arenā€™t. This is difference between page and modal.

1 Like

Thanks for the clarification.

Hi. How can actually add padding to modal window?

Will be very appreciated if you could share some code.

I would like to see that too

Thanks in advance

Me too I would like to see that, @luukschoen

Itā€™s not hardā€¦
Samething:

ion-page.modal {
    padding: 30px;
    background: rgba(0,0,0,0.5);
}

cc // @iborik @icarus_31 @fredy26

9 Likes

yep! working like a charm!

thanks @iborik

1 Like

Thanks @xr0master for this little example. I will work out a Pen in a couple of days with some little extraā€™s and iā€™ll post it over here. Itā€™s been a little busy lately, so I hadnā€™t had the time to explain it any faster :slight_smile:

2 Likes

Hi,
I tried this code in the .sccs (only this code in the file) of my modal page but it doesnā€™t work, the page still occupy 100% of space !
Do you have any idea why itā€™s not working in my case ? :frowning:

Thanks in advance!

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Windows 7 SP1
Node Version: v4.4.3
1 Like

Ok with the code in .scss of the opening page itā€™s working !

With the introduction of Inset Modals in Beta7 you might want to use the approach in the second post here:

ā€¦which I believe allows a bit more flexibility based on the height of the modal dialog (and circumvents any ionic2 beta7 modal inset css overwriting any custom css you have made).

can you please give the css code for itā€¦and how you are using it

Hey @xr0master thx for the css. I would like to have the white area with half the size but still centered vertically (like the real alerts are). How could I do that? Thx again

is it still working with rc1 ?

This worked for me:

ion-modal {
position: absolute;
top: 80px;
left: 45px;
display: block;
width: 70%;
height: 62%;
}