Close Overlay when user presses browser "Back" button.

[jampafoo]

Wondering if you would consider adding functionality which allows the user to close overlay via the browser’s “back” button. OR, if there is already an option to do this?

It seems to be more of an issue on mobile browsers. But it preforms the same on desktop also. Thanks!

[Nishithkant]

You may use following :

window.onhashchange = function () {
        $(".youOverlayClass").fadeIn(500);
        $('body')
      .css('overflow', 'hidden');
    } 

[EvanOlsen]

Here's how I accomplished it. The use case here is a modal window for details on books for sale.

$('.book-modal').popup({
    onopen: function() {
    	//Set a hash using the modal's ID
        window.history.pushState("", document.title, window.location.pathname + '#' + $(this).attr("id"));
	    window.onhashchange = function () {
	    	//Close all modals on hash change
            $('.book-modal').popup('hide');
            //Make the browser go "back" so you don't fill up the history state
            window.history.back();
        } 
    },
    onclose: function() {
    	//Reset the URL to remove the modal ID
        window.history.pushState("", document.title, window.location.pathname);
    }
});

if (window.location.hash) {
	//If there's a hash in the URL
    bookID = window.location.hash;
    //Show the modal with the same ID as the hash
    $(bookID).popup('show');
}