세계 은행 응용 프로그램은 어떻게 이런 팝업을 얻을 수 있습니까?

Question

세계 은행 웹 사이트는 데이터 시각화를위한 멋진 응용 프로그램을 제공합니다. 나는이 게시물의 하단에있는 응용 프로그램에 대한 링크를 제공했습니다.

통계 영역마다 오른쪽 상단에 밝은 회색 돋보기가 있고 한 번 클릭하면 완료 될 때 숨길 수있는 투명한 전체 화면 팝업이로드됩니다.

아무도 이것을 달성하기 위해 사용 된 API 또는 방법을 알고 있습니까? 아니면 비슷한 일을하는 올바른 방향으로 나를 가리켜 주시겠습니까?

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

Answer 1

그것은 자바 스크립트를 사용하여 수행되고있다. 오버레이에 표시된 데이터는 이미 페이지에로드되어 있지만 숨겨져 있습니다 (CSS display: none). 돋보기 링크를 클릭하면 해당 div가 display: block으로 설정됩니다.

내가 사용하는 오버레이 스크립트를 알지 못하지만 자습서/예제의 경우 javascript page overlay에 대해 Google을 검색 할 수 있습니다.

Answer 2

당신은 아주 쉽게과 같이, jQuery를 사용하여 그 효과를 해낼 수 있습니다

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

Demo

을