Clicking outside a dialog/modal to close

Hey!

I just wanted to share the way that I used to close a dialog/modal when clicking outside of it for anyone else who wants this!

https://ellie-app.com/5JyJv7PBwQfa1

This is the way that elm-bootstrap does it. I created the ellie so others can have a reference for implementing this on their own without having to dig into elm-bootstrap’s source.

6 Likes

Thanks for the example. Just out of curiosity, how would you show a dialog in an Elm app that is sharing code with some other FW (React/Angular/…) and doesn’t have an access to root element?

I think there was a blog post some time ago about that too.

2 Likes

I’m not exactly sure, I haven’t done anything like that before.

My guess would be in the dialog create a div with a unique id and mount the react/angular app from there. Though I’m not sure how mounting would work exactly if the div only exists when the dialog is open. I would recommend taking a look at Luke Westby’s talk about web components because that may end up being a nicer solution.

1 Like

hey this is an example of a Click Outside with A WebComponent using node.contains HTML API :

https://ellie-app.com/5KGvqDFczpca1

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.