我理想地寻找一个jQuery解决方案。
[编辑]
我应该补充一点,当然Pinterest行为不打破后退按钮,这是,再次,至关重要。
解决方法
首先,URL链接处理是服务器端分析,以查看链接是否源自Pinterest网站本身。也就是说,浏览器URL地址栏和历史记录是动态创建的,而不是由访问者实际执行。
澄清:地址栏不是实际的模型体验发生的地方!为了证明这一点,点击Pinterest对象,当在模态视图中转到地址栏,在该URL位置的结尾,将鼠标光标放在那里,然后点击enter。然后您将自己重定向到该位置!为了进一步验证您从未离开主页,请在Firebug / Firefox或Chrome中的“网络标签”中查看Net标签。
以下方法是Pinterest在访问主页时所做的。请查看姜:
>显示首页。
>等待访问者点击Pinterest对象。
>点击的对象具有用于直接访问的唯一网页。
>未跟踪单击的对象。
>浏览器栏将填充这个点击的对象位置,但你实际上不在那里。
>浏览器历史记录将通过JavaScrict或服务器端处理接收单击的位置。
> AJAX将从对象的页面加载一块数据(通过ID模式的肉)。可通过HTTPRequest验证。
>主页面上的单击对象已消失(这可以通过Inspect Element验证)。
> AJAX过程会将该条数据放置在屏幕中央,并带有白色覆盖。
>滚动主页被禁用,而AJAX“模态”数据通过#zoomScroll接收滚动事件。
>点击模态背景将对象返回到网页,并且URL地址栏被“视觉”恢复。
重新创建模型效果Pinterest使用我会调查支持HTML / iframed内容的不同灯箱。查看上述编号步骤将显示如何为您的网站实现所需的外观。
关键步骤是设置lightBox使用所有的视口,修改lightBox CSS规则,如果需要避免任何关闭按钮皮肤图形和边框。
然后,lightBox可以使用由AJAX填充的div的单个模板文件。所述div在半透明背景上的视口中水平地居中。 iframe本身是透明的,这将允许底层主页显示。
抛出一些类似于Pinterest的滚动规则,你有一个体面的克隆方法使用。
至于复制Pinterest的页面布局,参见SO Answer。
要使用自定义Pinterest按钮,即文本链接,缩略图或两者的组合,请参阅SO Answer。
对于数据Scrape处理与jsFiddle教程,参见这SO Answer。