How to close color box popup on browser back button

Question

I want to close my color box popup on browser's back button click.

I used an iframe and inside the iframe there are many links. When user click on particular link then a color box popup will open.

Currently after opened the popup if user click on back button then popup is not closing.

So i want such a functionality that if user click on back button then popup will be close and also page should not go to back (Disable back button).

I have used the following code but it's not working for me.

<script>
    $(document).ready(function() {
        function disableBack() { window.history.forward() }

        window.onload = disableBack();
        window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
    });
</script>

Please give me any suggestion to close the color box popup on back button or disable the back button completely.

Answer 1

You should use window.location.hash , and window.onhashchange . Basically, after popup open, you change hash to something (like window.location.hash = "popup_opend" ).

Then when user clicks back, that back click will remove the hash you just added. You just need to handle window.onhashchange to check for that and close the popup.

Of course, hope you don't have any other code that manipulate the hash.