Modal inside a div (specifying parent element for a modal)


#1

Is it possible in ionic to have modal inside some container (div etc) ?
In my case I need to have modal rendered into the content of the view, however header and footer still should be accessible and displayed in front of the modal.


#2

Well, than it is not a modal :wink: .

ionic modal adds a backtrop at the end of your body and the modal is absolutly positionated over your page.

You can write an own overlay for content areas.
Parent of the overlay should be “position: relative” to positionate the overlay absolute in the content container.
Your overlay should have been “position:absolute”.
And thats it.

Greets, bengtler


#3

Thank you for the reply.

That’s true that it is not a modal :smile: I’ve mentioned modal, as it is the component which functionality is the closest to the needs.
Regarding the problem itself, it not only overlay issue, as you have mentioned ionic injects modal with it’s backdrop to the body element - so I would need to do manual change to DOM structure, to put it where I want it to be. Also there is modal-open class added to the body element, which sets pointer-events to none, so also event handling for whole page gets influenced, plus I guess some more stuff might be going on.
My initial thought was that maybe there is already some support for that, but now I see it requires some more customization :smile:


#4

Yeah, but the time you need to figure out and ugly manipulating framework stuff (you should never do that :wink: )… you could write your own directive or something for your purposes.