search

vue-final / vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
https://vue-final-modal.org
MIT License
864 stars 95 forks source link

Click outside to close #344

Closed matthew-dean closed 7 months ago

matthew-dean commented 1 year ago

Is your feature request related to a problem? Please describe.

Most modals have a setting to click outside (the modal) to close.

Describe the solution you'd like

Click outside to close

Describe alternatives you've considered

A different modal lib, I guess?

Additional context

n/a

matthew-dean commented 1 year ago

Okay, I just figured out that the background prop, set to interactive turns off click outside behavior. Is there any reason why this is the case? I want an interactive background + clicking on it dismisses the modal. In fact, that's part of the reason for making it interactive.

hunterliu1003 commented 1 year ago

@matthew-dean

The default behavior of vfm already allow to click outside to close the modal. So you don't have to set background="interactive" and bind @clickOutside event to close the modal.

See the basic example of a confirm modal: https://vue-final-modal.org/use-cases/confirm-modal

mkantautas commented 1 year ago

@hunterliu1003 when you use interactive and have the modal defined at the same component and you're toggling it using v-model then clicking outside natively doesn't close the modal.

edited: Ok, it actually closes in this setup as well on click outside, but only if you first drag or resize the modal.