我想作为创造同样的效果Pinterest的 ，当你点击图片：一个模态窗口打开，但网页的URL也会改变。 最后这部分是至关重要的：在浏览器的地址栏中的URL发生了变化，但我们仍然看到在后台的原始网页内容（这就是为什么我把它，即使它可能会比这更复杂的模态）。 我最好找一个jQuery解决方案。
[编辑]我要补充一点，当然Pinterest的行为不会破坏后退按钮是再次，是至关重要的。
Answer 1:
这是我的Pinterest的是如何实现它的独特模式的外观和如何复制它的评估。
首先，URL链接处理进行分析 ，看是否链接从Pinterest的网站本身发起的服务器端 。 这就是说，在浏览器地址栏中的URL和历史是动态创建的，而不是实际的访问者进行 。
为了澄清：地址栏是不是当一个模型的经验是发生在实际的地方你！ 为了证明这一点，点击Pinterest的对象上，当模态视图转到地址栏 ，并在该URL位置的结尾将鼠标光标那里，然后按Enter键 。 然后，您将自己重定向到该位置 ！ 为了进一步核实，你从来没有离开主页，查看网络选项卡中的Firebug / Firefox或网络选项卡中的Chrome。
下面的方法是访问主页时什么Pinterest的是做。 请查看小心翼翼：
- 显示首页。
- 等待访问者点击Pinterest的对象。
- 点击的对象了有关直接访问的唯一网页。
- 点击的对象是没有跟上。
- 浏览器栏将填充自身与此点击对象的位置，但你实际上并不存在。
- 浏览器历史记录将通过JavaScrict或服务器端处理接收点击位置。
- AJAX将加载从对象的页的一块数据（通过ID模式的肉）。 通过可验证的HTTPRequest。
- 在主页上点击的对象已经消失（这可以通过检查元素进行验证）。
- 所述AJAX过程将把该数据片在画面的用白色覆盖的中心。
- 而AJAX“模式”的数据通过接收滚动事件滚动主页被禁用
#zoomScroll。 - 点击模式背景回报反对的网页和URL地址栏“视觉”恢复。
要重新创建模型效果Pinterest的使用我将探讨不同收藏的 ，支持HTML / iFrame内容。 回顾上述过程编号的步骤将展示如何实现你的网站所需的外观。
一个关键步骤是设置灯箱使用视窗所有 ，如果需要的话，以避免任何关闭的皮肤图形和边框修改灯箱CSS规则。
然后，灯箱可以使用一个模板文件使用一个div这是Ajax填充。 所述div是在上一个半透明背景视口水平居中。 iframe的本身是透明的，这将允许下面的主页显示出来。
再加上类似Pinterest的一些滚动规则 ，你必须使用一个体面的克隆方法 。
至于复制Pinterest的页面布局 ，请参阅本SO答案 。
要使用自定义Pinterest的按钮是文本链接 ， 缩略图 ，或两者的组合 ，看到这个SO答案 。
对于具有的jsfiddle教程数据刮Pinterest的过程中，看到这个SO答案 。
Answer 2:
我没有足够的代表对arttronics答案发表评论，但我想补充一点：
浏览器栏是通过新的HTML 5历史操作。 这种特殊的情况下，是可以做到的：
window.history.pushState({}, "Some Title", "the url")
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history/#The_pushState().C2.A0method
Answer 3:
这家伙把这种风格Pinterest的
但模态窗口打开看起来不同
http://codecanyon.net/item/jquery-pinterest-style-gallery-plugin/2463876
如果你可以添加白色覆盖它看起来。
看看这太
http://hasin.me/2012/03/10/building-a-nice-image-gallery-like-pinterestfriendsheet-using-facebook-graph-api-and-lightbulb/
这个也是
http://www.asual.com/jquery/address/
Answer 4:
下面是一些代码有一个jQuery模态对话框的例子。
http://jsfiddle.net/aDCQL/2/
这真的只是一个概念证明和可能被扩大后...
利用散列函数库，你可以进行基于URL的某些功能，并提供直接链接到这些相同的功能。 该库支持所有我们关心的浏览器。
实际路径路由库还存在也简化了一些路径定义的。
https://github.com/cowboy/jquery-hashchange
Answer 5:
如何prettyPhoto ？ 它增加了#prettyPhoto [图库] / X /的URL。
文章来源: How can I duplicate Pinterest website's modal effect?
