How can I duplicate Pinterest website's modal effect?

Question

I would like to create the same effect as on Pinterest when you click on an image: a modal window opens up but the URL of the page also changes. This last part is crucial: the URL in the address bar of the browser has changed, but we still see the original page content in the background (that's why I call it a modal even though it may be much more complicated than that). I am ideally looking for a jQuery solution.

[edit] I should add that of course the Pinterest behaviour does not break the Back button which is, again, crucial.

Answer 1

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 Bar and 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.
    

To recreate the model effect Pinterest uses I would investigate different lightbox's that support HTML/iframed content. Reviewing the numbered steps above process will show how to achieve the desired look for your website.

A key step would be to set the lightbox to use all of the viewport, modifying the lightbox CSS rules if required to avoid any Close Button skin graphics and borders.

The lightbox can then use a single template file with a div that's populated by AJAX. Said div is horizontally centered in the viewport on a semi-transparent background. The iframe itself is transparent which would allow the underlying home page to show through.

Throw in some scrolling rules similar to Pinterest and you have a decent clone method to use.

As far as duplicating the Pinterest Webpage Layout, see this SO Answer.

To use custom Pinterest Button that is text-link, thumbnail, or combo of both, see this SO Answer.

For Data Scrape Pinterest process with jsFiddle tutorial, see this SO Answer.

Answer 2

I don't have enough rep to comment on arttronics answer but I wanted to add this:

The browser bar is manipulated through the newer HTML 5 history. This particular case can be done with:

window.history.pushState({}, "Some Title", "the url")

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history/#The_pushState().C2.A0method

Answer 3

This guy call this pinterest style

but modal window opening looks different

http://codecanyon.net/item/jquery-pinterest-style-gallery-plugin/2463876

If you can add white overlay it looks .

look this too

http://hasin.me/2012/03/10/building-a-nice-image-gallery-like-pinterestfriendsheet-using-facebook-graph-api-and-lightbulb/

this too

http://www.asual.com/jquery/address/

Answer 4

Here is an example with a bit of code with a JQuery modal dialog.

http://jsfiddle.net/aDCQL/2/

This is really just a proof of concept and could possibly be expanded upon...

Utilizing a hashing library, you can perform certain functions based on a URL and provide direct links to those same functions. This library supports all the browsers we care about.

Actual path routing libraries also exist that also simplify some of these path definitions.

https://github.com/cowboy/jquery-hashchange