Question

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

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

Answer 1

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

首先，URL链接处理是服务器端分析，以查看链接是否来自Pinterest网站本身。也就是说，浏览器URL地址栏和历史记录是由访问者动态创建的，实际上并未执行。

澄清：地址栏不是您进行模特体验时的实际位置！要证明这一点，请点击 Pinterest对象，然后在模态视图中转到地址栏，并在该网址的末尾放置您的鼠标光标然后点击输入。然后，您将重定向自己到该位置！要进一步验证您是否从未离开主页，请在Firebug / Firefox中查看 Net Tab 或在Chrome中查看网络标签。

以下方法是访问主页时 Pinterest 正在执行的操作。请小心翼翼地看：左

显示主页。
等待访客点击Pinterest对象。
点击的对象有一个独特的网页供您直接访问。
未遵循点击的对象。
浏览器栏会自动填充此点击的对象位置，但实际上并不存在。
浏览器历史记录将通过JavaScrict或服务器端处理获得点击的位置。
AJAX将从对象的页面加载一段数据（通过ID获取模态）。可通过HTTPRequest验证。
主页上点击的对象已消失（可通过Inspect Element验证）。
AJAX流程会将该数据放在屏幕中央，并带有白色叠加。
当AJAX“模态”数据通过#zoomScroll接收滚动事件时，滚动主页面被禁用。
点击模态背景会将对象返回到网页，并且“可视地”还原URL地址栏。

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

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

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

投入一些滚动规则，类似于 Pinterest ，您可以使用体面的克隆方法。

至于复制 Pinterest网页布局，请参阅此SO Answer。

使用 文字链接 的自定义 Pinterest按钮， 缩略图 ，或 两者的组合 ，请参阅此SO Answer。

对于使用jsFiddle教程的 Data Scrape Pinterest 流程，请参阅此SO Answer。

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

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 [gallery] / x /添加到URL。

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

5 个答案: