So I have a modal, I have noticed if a user clicks their browser “back button” after viewing the modal if will lock up the site and have it greyed out as it thinks the modal is still in focus.
Is there a way to hide a modal if a user changes pages?
Example of what I’m talking about: If you click “View More Details” and then click your browser back button.
http://164.92.75.108/boats
How are you calling the modal, can you show us the action?
Just the normal modal button open, and these are the options I have checked within the modal
Based on your findings I tried the same on my site where I show a modal after a search action. when pressing the back button on the browser the same thing happens as on your website.
The modal’s dynamic events allow for actions when the modal is hidden
Perhaps forcing a modal hide when hidden will do what you need (untried idea)
I usually do an SPA site, and this isn’t a problem on there. But it looks like you’re too far in to convert to an SPA.
+1 to @Hyperbytes idea!
Also, I can’t do this right now to test, but if I were you I’d try this:
I gave that a try and it did not work as expected, but I appreciate the clever idea
I also gave the .show method a try without any change, appreciate the idea
There must be a DMX code or something that tells the Modal to open or close - but I don’t know what it is.
You could then, on every page insert a code that basically says “On load, close all modals.”
I wonder if @ben or @Teodor know if that’s command that the DMX can handle?
If you remove modal-fullscreen does it still happen?
It does yes
That can be done as per
But I do not like this method, for it means that all pages in the project must contain the on-load or on-ready event.
I think, a better way would be to have a Router component that allows the modal to close beforeRouteLeave or similar. That way you would need it only for the page containing the modal.
Maybe put this forward as a Feature Request.
