如何复制 Pinterest 网站的模态效果? [英] How can I duplicate Pinterest website's modal effect?
问题描述
我想在您单击图像时创建与 Pinterest 相同的效果:模态窗口打开，但页面的 URL 也发生了变化.最后一部分至关重要:浏览器地址栏中的 URL 已更改，但我们仍然在后台看到原始页面内容(这就是为什么我称它为模态，尽管它可能比这要复杂得多).理想情况下，我正在寻找一个 jQuery 解决方案.
I would like to create the same effect as on Pinterest when you click on an image: a modal window opens up but the URL of the page also changes. This last part is crucial: the URL in the address bar of the browser has changed, but we still see the original page content in the background (that's why I call it a modal even though it may be much more complicated than that). I am ideally looking for a jQuery solution.
我应该补充一点，Pinterest 行为当然不会破坏返回按钮，这也是至关重要的.
[edit] I should add that of course the Pinterest behaviour does not break the Back button which is, again, crucial.
推荐答案
这是我对 Pinterest 如何实现其独特的模态外观以及如何复制它的评估.
This is my assessment of how Pinterest achieves it's unique modal look and how to duplicate it.
首先，URL 链接处理是服务器端分析，以查看链接是否源自 Pinterest 网站本身.也就是说，Browsers URL Address Bar 和 History 是动态创建的，并非由访问者实际执行.
First and foremost, URL Link handling is server-side analyzed to see if the link is originating from the Pinterest site itself. That said, the Browsers URL Address Bar and History are dynamically created and not actually performed by the visitor.
澄清一下:地址栏并不是您进行模型体验时的实际位置！为了证明这一点，请单击 Pinterest 对象，然后在 模态视图 中转到 地址栏，然后在该 URL 位置的末尾放置您的鼠标光标在那里，然后点击进入.然后，您将自己重定向到那个位置！要进一步确认您从未离开过主页，请在 Firebug/Firefox 中查看 Net Tab 或在 Chrome 中查看 Network Tab.
To clarify: The address bar is not the actual place your at when a model experience is taking place! To prove this, click on a Pinterest object and when in modal view go to the Address Bar and at the end of that URL location place your mouse cursor there and then click enter. You will then redirect yourself to that location! For further verification that you never left the home page, view Net Tab in Firebug/Firefox or Network Tab in Chrome.
以下方法是Pinterest在访问主页时所做的.请谨慎查看:
The following method is what Pinterest is doing when visiting the home page. Please view gingerly:
- 显示主页.
- 等待访问者点击 Pinterest 对象.
- 被点击的对象有一个独特的网页可以直接访问.
- 点击的对象没有被关注.
- 浏览器栏会自动填充这个被点击的对象位置，但你实际上并不在那里.
- 浏览器历史记录将通过 JavaScrict 或服务器端处理接收点击位置.
- AJAX 将从对象的页面加载一段数据(通过 ID 的模态肉).可通过 HTTPRequest 进行验证.
- 主页上被点击的对象已经消失(可以通过 Inspect Element 进行验证).
- AJAX 进程会将那条数据放在屏幕中央，并带有白色覆盖层.
- 当 AJAX模态"数据通过
#zoomScroll接收滚动事件时，滚动主页被禁用. - 单击模态背景会将对象返回到网页，并且 URL 地址栏可视"还原.
- Show Home Page.
- Wait for visitor to click on a Pinterest object.
- The clicked object has a unique webpage for direct access.
- The clicked object is not followed.
- The browser bar will populate itself with this clicked objects location, but your not actually there.
- The browser history will receive clicked location via JavaScrict or Server-Side processing.
- AJAX will load a piece of data (meat of modal via ID) from object's page. Verifiable via HTTPRequest.
- The clicked object on the main page has disappeared (This can be verified via Inspect Element).
- The AJAX process will place that piece of data in the center of the screen with a white overlay.
- Scrolling main page is disabled while AJAX "modal" data receives scroll events via
#zoomScroll. - Clicking modal background returns object to webpage and URL Address Bar is "visually" reverted.
为了重现 Pinterest 使用的模型效果，我将研究支持 HTML/iframed 内容的不同 灯箱.查看上述过程中编号的步骤将展示如何为您的网站实现所需的外观.
To recreate the model effect Pinterest uses I would investigate different lightbox's that support HTML/iframed content. Reviewing the numbered steps above process will show how to achieve the desired look for your website.
一个关键步骤是将灯箱设置为使用所有视口，如果需要，修改灯箱 CSS 规则以避免任何关闭按钮皮肤图形和边框.
A key step would be to set the lightbox to use all of the viewport, modifying the lightbox CSS rules if required to avoid any Close Button skin graphics and borders.
然后灯箱可以使用单个模板文件和由 AJAX 填充的 div.所述div在半透明背景上的视口中水平居中.iframe 本身是透明的，可以让底层主页显示出来.
The lightbox can then use a single template file with a div that's populated by AJAX. Said div is horizontally centered in the viewport on a semi-transparent background. The iframe itself is transparent which would allow the underlying home page to show through.
加入一些类似于 Pinterest 的滚动规则，你就有了一个不错的克隆方法可以使用.
Throw in some scrolling rules similar to Pinterest and you have a decent clone method to use.
至于复制 Pinterest 网页布局，请参阅此 SO Answer.
As far as duplicating the Pinterest Webpage Layout, see this SO Answer.
要使用自定义 Pinterest 按钮，即 文本链接，缩略图，或两者的组合，请参阅此SO Answer.
To use custom Pinterest Button that is text-link, thumbnail, or combo of both, see this SO Answer.
对于 Data Scrape Pinterest 过程与 jsFiddle 教程，请参阅此 SO Answer.
For Data Scrape Pinterest process with jsFiddle tutorial, see this SO Answer.
这篇关于如何复制 Pinterest 网站的模态效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
