如何复制Pinterest网站的模态效果？

Question

当您单击图像时,我想创建与Pinterest相同的效果:打开模态窗口但页面的URL也会更改.最后一部分至关重要:浏览器地址栏中的URL已更改,但我们仍然在后台看到原始页面内容(这就是为什么我称之为模态,即使它可能比这复杂得多).我理想地寻找一个jQuery解决方案.

[编辑]我应该补充一点,当然Pinterest行为不会破坏Back按钮,这也是至关重要的.

Answer 1

这是我对Pinterest如何实现它的独特模态外观以及如何复制它的评估.

首先,URL链接处理在服务器端进行分析,以查看链接是否源自Pinterest站点本身.也就是说,浏览器URL地址栏和历史记录是动态创建的,而不是由访问者实际执行的.

澄清一下:地址栏不是您进行模特体验时的实际位置!要证明这一点,请单击Pinterest对象,当在模态视图中转到地址栏时,在该URL位置的末尾将鼠标光标放在那里,然后单击回车.然后,您将自己重定向到该位置!要进一步验证您是否从未离开主页,请在Chrome中查看Firebug/Firefox中的Net Tab或Chrome中的Network Tab.

以下方法是Pinterest在访问主页时所做的事情.请小心翼翼地看:

1. 显示主页.
   
2. 等待访问者点击Pinterest对象.
   
3. 点击的对象具有可供直接访问的唯一网页.
   
4. 未遵循单击的对象.
   
5. 浏览器栏将使用此单击的对象位置填充自己,但实际上并不存在.
   
6. 浏览器历史记录将通过JavaScrict或服务器端处理接收单击的位置.
   
7. AJAX将从对象的页面加载一段数据(通过ID的模态).可通过HTTPRequest验证.
   
8. 主页上单击的对象已消失(可通过Inspect Element验证).
   
9. AJAX过程会将该数据放在屏幕中央,并带有白色叠加层.
   
10. 当AJAX"模态"数据通过时接收滚动事件时,滚动主页面被禁用#zoomScroll.
    
11. 单击模态背景将对象返回到网页,并且"可视地"还原URL地址栏.
    

为了重新创建Pinterest使用的模型效果,我将研究支持HTML/iframed内容的不同灯箱.查看上述编号步骤将显示如何实现您网站的所需外观.

关键步骤是将灯箱设置为使用所有视口,如果需要,修改灯箱CSS规则以避免任何关闭按钮皮肤图形和边框.

然后,灯箱可以使用单个模板文件,该文件div由AJAX填充.所述div在半透明背景上在视口中水平居中.iframe本身是透明的,允许底层主页显示.

抛出一些类似于Pinterest的滚动规则,你可以使用一个像样的克隆方法.

至于复制Pinterest网页布局,请参阅此SO答案.

要使用自定义Pinterest按钮,它是文本链接,缩略图或两者的组合,请参阅此SO答案.

对于使用jsFiddle教程的Data Scrape Pinterest流程,请参阅此SO答案.

Answer 2

我没有足够的代表评论艺术家的答案,但我想补充一点:

浏览器栏通过较新的HTML 5历史记录进行操作.这个特例可以通过以下方式完成:

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

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