当您单击图像时，我想创建与Pinterest上相同的效果：打开一个模式窗口，但页面的 URL 也会更改。最后一部分至关重要：浏览器地址栏中的 URL 已更改，但我们仍然在后台看到原始页面内容（这就是为什么我称它为模态，尽管它可能比这要复杂得多）。理想情况下，我正在寻找一个 jQuery 解决方案。
[编辑] 我应该补充一点，Pinterest 行为当然不会破坏返回按钮，这也是至关重要的。
问问题
13537 次
5 回答
50
这是我对Pinterest如何实现其独特的模态外观以及如何复制它的评估。
首先，对 URL 链接处理进行服务器端分析，以查看链接是否来自 Pinterest 网站本身。也就是说，浏览器 URL 地址栏和历史记录是动态创建的，而不是由访问者实际执行的。
澄清一下：地址栏不是您进行模型体验时的实际位置！为了证明这一点，单击Pinterest 对象，在模式视图中转到地址栏，在该 URL 位置的末尾将鼠标光标放在那里，然后单击 enter。然后，您会将自己重定向到该位置！要进一步验证您从未离开过主页，请查看Firebug/Firefox中的“网络”选项卡或Chrome 中的“网络”选项卡。
以下方法是Pinterest在访问主页时所做的。请谨慎查看：
- 显示主页。
- 等待访问者点击 Pinterest 对象。
- 被点击的对象有一个独特的网页可以直接访问。
- 不跟随点击的对象。
- 浏览器栏将使用此单击的对象位置填充自身，但您实际上并不存在。
- 浏览器历史将通过 JavaScrict 或服务器端处理接收点击位置。
- AJAX 将从对象的页面加载一段数据（通过 ID 模态的肉）。可通过 HTTPRequest 验证。
- 主页上被点击的对象已经消失（这可以通过 Inspect Element 进行验证）。
- AJAX 进程会将那条数据放在屏幕中央，并带有白色覆盖层。
- 滚动主页被禁用，而 AJAX“模态”数据通过
#zoomScroll. - 单击模态背景将对象返回到网页，并且 URL 地址栏被“视觉”还原。
为了重新创建Pinterest使用的模型效果，我将研究支持HTML/iframed内容的不同灯箱。查看上述过程中的编号步骤将展示如何为您的网站实现所需的外观。
一个关键步骤是将灯箱设置为使用所有视口，如果需要，修改灯箱 CSS 规则以避免任何关闭按钮皮肤图形和边框。
然后，灯箱可以使用由 AJAX 填充的单个模板文件。divSaiddiv在半透明背景上的视口中水平居中。iframe 本身是透明的，这将允许底层主页显示出来。
加入一些类似于Pinterest的滚动规则，你就有了一个不错的克隆方法可以使用。
至于复制Pinterest 网页布局，请参阅此SO 答案。
要使用text-link、thumbnail或两者组合的自定义Pinterest 按钮，请参阅此SO Answer。
对于使用 jsFiddle 教程的Data Scrape Pinterest流程，请参阅此SO Answer。
于 2012-06-28T22:41:15.563 回答
10
我没有足够的代表来评论 arttronics 的答案，但我想补充一下：
浏览器栏是通过较新的 HTML 5 历史来操作的。这种特殊情况可以通过以下方式完成：
window.history.pushState({}, "Some Title", "the url")
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history/#The_pushState().C2.A0method
于 2012-07-17T22:27:27.867 回答
1
这是一个带有 JQuery 模式对话框的代码的示例。
这实际上只是一个概念证明，可能会扩展......
利用散列库，您可以基于 URL 执行某些功能并提供指向这些相同功能的直接链接。这个库支持我们关心的所有浏览器。
实际路径路由库也存在，它们也简化了其中一些路径定义。
于 2012-06-28T23:11:40.877 回答
1
这家伙称之为 pinterest 风格
但模态窗口打开看起来不同
http://codecanyon.net/item/jquery-pinterest-style-gallery-plugin/2463876
如果你可以添加白色覆盖它看起来。
也看这个
这个也是
于 2012-06-28T21:11:14.147 回答
0
漂亮照片怎么样？它将#prettyPhoto[gallery]/x/ 添加到URL。
于 2012-06-28T21:37:11.493 回答