如何复制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网站本身.也就是说，浏览器URL地址栏和历史记录是动态创建的，访问者实际上没有执行.
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标签，在Chrome中查看 Network标签.
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答案 .
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.
对于使用jsFiddle教程进行 Data Scrape Pinterest 的过程，请参见此 SO Answer .
For Data Scrape Pinterest process with jsFiddle tutorial, see this SO Answer.
这篇关于如何复制Pinterest网站的模式效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
