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


#1

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


How to use ngModel with Prompt Alerts?
Modal dialogue box suggestion?
Is it possible to show an image in an alert?
Creating custom alerts in ionic
Navigation from inside modal, then retain tabs and side menu, ionic v3
Creating 2 radio groups in on Radio Alert
#2

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


#3

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.


#4

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


Ionic2 no-fullscreen modal
#5

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!


Show Checkbox Alert with "All Items" Option
#6

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


#7

Thanks for the clarification.


#8

Hi. How can actually add padding to modal window?

Will be very appreciated if you could share some code.


#9

I would like to see that too

Thanks in advance


#10

Me too I would like to see that, @luukschoen


#11

It’s not hard…
Samething:

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

cc // @iborik @icarus_31 @fredy26


#12

yep! working like a charm!

thanks @iborik


#13

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:


#14

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

#15

Ok with the code in .scss of the opening page it’s working !


#16

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


#17

can you please give the css code for it…and how you are using it


#18

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


#19

is it still working with rc1 ?


#20

This worked for me:

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