# Clicking outside a dialog/modal to close

**URL:** <https://discourse.elm-lang.org/t/clicking-outside-a-dialog-modal-to-close/3735>\
**Category:** Show and Tell\
**Created:** [June 3, 2019, 7:25pm UTC](https://discourse.elm-lang.org/t/clicking-outside-a-dialog-modal-to-close/3735 "2019-06-03T19:25:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaredramirez](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jaredramirez/32/1157_2.png) [@jaredramirez](https://discourse.elm-lang.org/u/jaredramirez)\
**Post date:** [June 3, 2019, 7:25pm UTC](https://discourse.elm-lang.org/t/clicking-outside-a-dialog-modal-to-close/3735/1 "2019-06-03T19:25:39Z")

</div>

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](https://ellie-app.com/5JyJv7PBwQfa1)

This is the way that [elm-bootstrap](https://github.com/rundis/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.

---

<div class="post-metadata">

**Author:** ![razze](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/razze/32/1650_2.png) [@razze](https://discourse.elm-lang.org/u/razze)\
**Post date:** [June 4, 2019, 9:17am UTC](https://discourse.elm-lang.org/t/clicking-outside-a-dialog-modal-to-close/3735/3 "2019-06-04T09:17:52Z")

</div>

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

> **[Elm DOM node decoder to detect click outside](https://dev.to/margaretkrutikova/elm-dom-node-decoder-to-detect-click-outside-3ioh)**
>
> Implementing json decoder to recursively decode event target DOM node to detect click outside

---

<div class="post-metadata">

**Author:** ![jaredramirez](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jaredramirez/32/1157_2.png) [@jaredramirez](https://discourse.elm-lang.org/u/jaredramirez)\
**Post date:** [June 4, 2019, 2:58pm UTC](https://discourse.elm-lang.org/t/clicking-outside-a-dialog-modal-to-close/3735/4 "2019-06-04T14:58:22Z")

</div>

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](https://www.youtube.com/watch?v=tyFe9Pw6TVE) because that may end up being a nicer solution.

---

<div class="post-metadata">

**Author:** ![kalutheo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/kalutheo/32/1557_2.png) [@kalutheo](https://discourse.elm-lang.org/u/kalutheo)\
**Post date:** [June 6, 2019, 7:32am UTC](https://discourse.elm-lang.org/t/clicking-outside-a-dialog-modal-to-close/3735/5 "2019-06-06T07:32:35Z")

</div>

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

[https://ellie-app.com/5KGvqDFczpca1](https://ellie-app.com/5KGvqDFczpca1)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [June 16, 2019, 7:32am UTC](https://discourse.elm-lang.org/t/clicking-outside-a-dialog-modal-to-close/3735/6 "2019-06-16T07:32:38Z")

</div>

Closed on June 16, 2019, 7:32am UTC

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