How To Modify History As Facebook's Photo Viewer Does?

I have a popup modal on my website similar to facebook's photo viewer. When the modal is opened, it is displaying content from another page and I want to change the address bar val

Solution 1:

You have to use history API, and specifically you have to use history.pushState()history API

So when a user opens the modal you can do something :

history.pushState(stateObj, "page 2", "image\id.html");

Where : stateObj is the object that you pass through history, page 2 is the title and the last parameter is the URL you want to modify.

After you've done so you have to use on popstate event as the browser Back and Forward buttons won't reload the page.