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.
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:
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
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 ?
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).
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