世界银行应用如何实现这种弹出式？

Question

世界银行网站有一个很酷的应用程序，用于可视化数据。我已在此帖子的底部提供了该应用程序的链接。

对于每个统计区域，右上角都有一个浅灰色放大镜，一旦点击它就会加载一个透明的全屏弹出窗口，你也可以在完成后隐藏它。

有谁知道他们用来实现这个目标的API或方法？或者甚至指出我如何做类似事情的正确方向？

http://data.worldbank.org/country/australia

Answer 1

使用JavaScript完成。叠加层中显示的数据已经加载了页面，但它是隐藏的（css display: none）。单击放大镜链接时，相应的div将设置为display: block。

我不知道他们使用的是哪个叠加脚本，但您可以通过谷歌搜索javascript page overlay获取教程/示例。

Answer 2

你可以使用jQuery轻松实现这种效果，如下所示：

$("button:first").click(function() {
  $(".overlay").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
  $(".overlay").fadeToggle("slow", "linear");
});

Demo