Search code examples
htmxhyperscript

In Hyperscript how do you properly close an overlay from outside the element "on click" in?

Is there a way in Hyperscript to create the behavior for overlay elements to close/hide on clicks outside their own element?

I've tried "on click from elsewhere add .hidden to me"?

I saw someone mention "elsewhere" in another post, but I have not seen it in their docs. It is also possible this is not working because the element triggering the opening of the modal is technically "elsewhere".

I also imagine when that modal is hidden, this shouldn't be triggered as it seems like that would be inefficient. Is this approach even advised with the "hypermedia" ethos in mind?

Solution

  • Something like this should work or at least give you an idea:

    on click from body
  if event.target is not in me and I do not match .hidden
    add .hidden