Close the modal when a user click outside the modal #131
Replies: 10 comments 6 replies
-
You could publish the modal and modify the
Then wrap your modal content in a div where you add a click event with stop propagation.
|
Beta Was this translation helpful? Give feedback.
-
hi good suggestion @hugoaf , however I hope there is a simpler way to do this out of the box, if I have write custom code for such a basic functionality it kind of defeats the purpose of using this library 😓 |
Beta Was this translation helpful? Give feedback.
-
@dayemsiddiqui I agree. This was handled in alpine modal component |
Beta Was this translation helpful? Give feedback.
-
@dayemsiddiqui thanks for reporting! I have converted this issue to a feature request for now, so we can focus on fixing any bugs first. |
Beta Was this translation helpful? Give feedback.
-
Hmm @joshhanley this feels more like a bug to me than a new feature request, generally it is expected that a modal should close if clicked outside |
Beta Was this translation helpful? Give feedback.
-
Definitely important - I have a large user base who are 50+ and low tech. Asking them to use a keyboard ESC key, or clicking a small X, is unfair. I get that some modals should not be dismissable, but since these are by default, clicking the outside area is expected behavior. I cannot imagine a scenario where you'd want a modal that can be dismissed, but not allow it to be dismissed this way. Thanks team! :) |
Beta Was this translation helpful? Give feedback.
-
Same here. I would expect this to be default behaviour on both modals and flyouts, with the option to turn it off if required. |
Beta Was this translation helpful? Give feedback.
-
It is build on top of the browser dialog element if I'm not mistaken. This elements default behavior does not allow for closing the modal when clicking outside. So I would say this is expected behavior by default. Although I think an option to easily disable this default behavior and allow for clicking outside the modal to close the it would be a nice addition. |
Beta Was this translation helpful? Give feedback.
-
Publish the modal and add php artisan flux:publish <dialog
x-on:click.self="$el.close()"
... |
Beta Was this translation helpful? Give feedback.
-
Hi I have started using flux in my project, so far I really like, but I have noticed that the modal does not automatically close when a user clicks out side the modal, infact I looked at the modal example on the documentation site and the only way to close the modal is by clicking the close icon.
How can I configure the modal to automatically close when the click happens outside the modal
Beta Was this translation helpful? Give feedback.
All reactions