How to extend Ionic Popup?

1

I need to make several modal popups with darkened backgrounds.

These have various designs.

How should I use/extend Ionic Popups for this purpose?

Or is it recommended to just build these in some other way?

What are the dis/advantages?

2

There is PR https://github.com/driftyco/ionic/pull/2465 which will allow to assign custom CSS classes to popup container. Hopefully it will be merged before beta-14 is released, this way you can just create CSS class and attach it to all your popups.

1 Like
3

What if I want to add html/DOM elements to the popup, like text fields, buttons, etc? Not just CSS?

4

You can create directive and use it in all popups

5

Can you show a small snippet to direct me a little closer?

6

It depends on what exactly you want to be reusable, but just as example (currently, default header and footer are always visible, but you will be able to override it in beta-14):

<my-popup>
    <my-popup-header>
        ... project specific HTML
    </my-popup-header>
    <my-popup-body>
        ... project specific HTML
    </my-popup-body>
    <my-popup-footer>
        ... project specific HTML
    </my-popup-footer>
</my-popup>
7

Nice! I need the popup to interact with the (native?) keyboard. So, the popup has:

  1. Text field
  2. Button

And, below that, a native or JS keyboard, that sends input per-key, to the text field

Can you please help with this? I’m not sure where to start (especially, regarding the keyboard / textfield interaction, especially if it’s a native kb)

What do those new directives (my-popup) need to do exactly, in their definitions? I’ve not written my own directives before. I’m sure I can figure that general part out, but what, in the popup case, should the definition be?

Thanks!