Modal alterar a URL: Como fazer?

[Maykel-ctba 233]

Fala galera,

 

Meu cliente me solicitou uma solução que ele viu no Pinterest e no Behance:

 

Ao clicar em um post (imagem), é aberto um modal com o conteúdo, porém, a URL é alterada. E se verem, ao entrar com a URL que está lá em cima, ele não abrirá novamente no modal, e sim em uma página exclusiva.

 

 

E tudo isso é feito sem recarregar a página.

 

Como isso é feito? Poderiam me ajudar?

 

Encontrei esse tópico no stackoverflow de um cara tentando explicar o funcionamento, mas não faço a minima idéia do que ele esteja falando a partir do que marquei em vermelho (abaixo)

 

 

This is my assessment of how Pinterest achieves it's unique modal look and how to duplicate it.

First and foremost, URL Link handling is server-side analyzed to see if the link is originating from the Pinterest site itself. That said, the Browsers URL Address Bar and History are dynamically created and not actually performed by the visitor.

To clarify: The address bar is not the actual place your at when a model experience is taking place! To prove this, click on a Pinterest object and when in modal view go to the Address Barand at the end of that URL location place your mouse cursor there and then click enter. You will then redirect yourself to that location! For further verification that you never left the home page, view Net Tab in Firebug/Firefox or Network Tab in Chrome.

The following method is what Pinterest is doing when visiting the home page. Please view gingerly:

1. Show Home Page.
2. Wait for visitor to click on a Pinterest object.
3. The clicked object has a unique webpage for direct access.
4. The clicked object is not followed.
5. The browser bar will populate itself with this clicked objects location, but your not actually there.
6. The browser history will receive clicked location via JavaScrict or Server-Side processing.
7. AJAX will load a piece of data (meat of modal via ID) from object's page. Verifiable via HTTPRequest.
8. The clicked object on the main page has disappeared (This can be verified via Inspect Element).
9. The AJAX process will place that piece of data in the center of the screen with a white overlay.
10. Scrolling main page is disabled while AJAX "modal" data receives scroll events via #zoomScroll.
11. Clicking modal background returns object to webpage and URL Address Bar is "visually" reverted.

 

[Jorge_Alves 1]

Penso que é feito da seguinte forma, após o sucesso do AJAX para carregar o modal, é executado

history.pushState(null,null,'URL pretendido');