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

How am I supposed to prevent a modal from being closed? #367

Closed Twanghofer closed 7 months ago

Twanghofer commented 1 year ago

Since the Migration from v3 to v4, I am not sure how to do this. The migration guide suggests, that 'It's easy to have a condition before open or before close the modal', but this won't work when using escToClose or clickToClose.

How can I prevent a Modal from being closed with escToClose or clickToClose?

Me-Phew commented 1 year ago

I'm pretty sure you can just set the escToClose and clickToClose props to false.

jcmillett commented 8 months ago

I'm also running into this issue. I want to allow click outside or escape key to close the dialog, but I want to run some logic first to verify it's what the user wants to do. Is this not possible?

Twanghofer commented 7 months ago

I'm also running into this issue. I want to allow click outside or escape key to close the dialog, but I want to run some logic first to verify it's what the user wants to do. Is this not possible?

For the project in question I just stayed with v3, cause I didn't find a good solution yet

hunterliu1003 commented 7 months ago

@Twanghofer Indeed. When I rewrote v4, I did not consider this because I did not encounter this requirement in my experience. However, I agree with the situation you mentioned about escToClose and clickToClose. I will try to add the event.stop() function to v4, but I can't give you a guaranteed time yet.

I don't want vfm users to be stuck in v3 because of this situation. I'm sorry for the delay in replying to you.

hunterliu1003 commented 7 months ago

The v4.5.0 is released Now you can use @beforeOpen="(event) => event.stop()" or @beforeClose="(event) => event.stop()" to prevent the open or close modal. Checkout: https://vue-final-modal.org/api/components/vue-final-modal#events