Hello! I've built a modal app and was wondering if there's a way to prevent the modal from closing when clicking outside of it? From what I understand this triggers the modal close event - is there a way to intercept this?
Prevent modal from closing when clicking outside
Thanks @tipene
We were hoping to implement some sort of exit confirmation if a user were to accidentally click outside of the modal. Our modal will be a form that could potentially collect quite a bit of input from the user, and we wanted to prevent them from having to re-input if they were to dismiss the window early.
One thing I've done so far to help at least prevent this from happening is max out the size of the modal. We also don't want to save any of their input in local/session storage as it includes sensitive PII data.
Would love to hear any alternative solutions you may be able to provide!
Thanks
Eric
Thanks for providing the context! An alternative I was going to suggest was having the modal re-open itself if the user accidentally clicked out of the element but with the requirement of retaining the form data, I don't think that will work since it'll be a fresh instance of the modal without any of the previous state.
Have you considered using a top_bar app as an option? That way, you'd have more control over when the form opens and closes e.g trigger the top_bar app to open from the ticket_sidebar and close the app when the user clicks "submit form".
Have you considered using a top_bar app as an option? That way, you'd have more control over when the form opens and closes e.g trigger the top_bar app to open from the ticket_sidebar and close the app when the user clicks "submit form".
Thanks for the suggestion @tipene - It's no deal breaker if we can't implement but will keep that in mind for the next app :)
Appreciate the help!
No worries at all!
Have a great day :)
Tipene
Have a great day :)
Tipene
Hi @tipene
I actually want to achieve the opposite in my top bar.
Right now when a user clicks away from the top bar (when opened), it does not close. User have to click the icon to close out.
But for better user experience we want the top bar window to close when a user clicks away from it. Is this also possible?
Hi there! While we do provide a method that allows you to hide the top bar popover, to actually register an event listener when clicking outside of the iframe, you'd run into the same issue that Tipene noted above...the ZAF iframe can't access the parent DOM's events. Since it sounds like the functionality that you want doesn't require the user to update the ticket while keeping the window open, the opposite suggestion that Tipene noted might be better for you: utilize a modal location instead of the top bar!
Login to the community
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
There isn't really an easy way - if any way at all - to do this since the modal and associated events are created within the parent DOM which is inaccessible from the iframe'd ZAF app that creates the modal. If you could provide more detail on what you're hoping to achieve, I might be able to suggest an alternative solution for you.
Thanks!
Tipene