Clicking outside a dialog/modal to close


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!

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.


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.


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.


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


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