Interesting issue involving Reveal Modal and HTML 5 history API



  • Hi,

    I am trying to solve a UX issue with modals (also lightboxes and all kinds of overlays, but let's start with a modal). What I want to do is allow the user to click the browser's back button to dismiss a modal and return to the original state of the page, this is: without modal. More details about the issue on the Codepen below.

    For such purpose I thought about using HTML 5 history API. I started trying to append a querystring parameter to the URL, such as https://techinfomart.blogspot.in/2017/10/top-upcoming-smartphones-in-india.html but I ended leaving this approach because I couldn't handle all the stuff involving popstate event, pageshow event, etc. It overwhelmed me.

    Then I tried with a more simple approach involving a hash appended to the URL, such as https://techinfomart.blog.in, and the hashchange event. This approach is working better for me and I almost have it.

    When the user clicks the button to show the modal, he or she can click the browser's back button and it will dismiss the modal. Furthermore, after that, the user can click the browser's forward button and it will show the modal again. Very nice! The user can also navigate directly to the URL with the hash to access directly this state of the page, as well as he or she can bookmark such state of the page. It's working pretty neat and I'm rather happy with the results. Try it.

    The problem is that it is not working totally perfect. When the user dismiss the modal by clicking the background or the ESC key or the X in the upper right corner, the history starts to mess up. Try it: open the modal clicking on the button, then click the background to dismiss it (look a the URL in the address bar, first problem here is that the hash isn't removed), then click your browser back button and you will see it isn't working correctly. You will end with a duplicate in your history and you have to click the back button twice in order to go to the previous page. This is not desirable from an UX viewpoint. Does anyone know a solution to this?

    Code: https://techinfomart.blogspot.in/2017/07/nokia-8-boss-is-coming-soon.html

    I suggest trying it in your own machine and NOT IN Codepen, so you can view the hash in the URL, etc. Also, it doesn't work in Codepen Full mode, I don't know why.

    Comments and discussion about the UX issue are welcome too.

    Thanks



  • Maybe this thread needs to be moved under "Technology" sub-sub-forum. It's an idea not specific to Vivaldi.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.