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