2011-09-11 10 views
0

世界銀行のウェブサイトには、データを視覚化するクールなアプリケーションがあります。私はこの記事の一番下にあるアプリケーションへのリンクを提供しました。世界銀行のアプリはどのようにこのようなポップアップを実現していますか?

各統計領域には、右上隅に明るい灰色の虫めがねがあり、一度クリックすると透明なフルスクリーンのポップアップが表示され、完了したら非表示にすることもできます。

これを達成するために使用したAPIまたはメソッドを知っている人はいますか?あるいは、何か似たようなやり方を正しい方向に向けることさえできますか?

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

答えて

3

それはJavaScriptを使用して行われています。オーバーレイに表示されるデータは既にページに読み込まれていますが、非表示になっています(cs display: none)。虫めがねリンクをクリックすると、それぞれのdivはdisplay: blockに設定されます。

私はどのオーバレイスクリプトを使用しているのかわかりませんが、チュートリアル/例ではjavascript page overlayのgoogleを使用できます。

enter image description here enter image description here

1

あなたはそうのように、jQueryのを使用して非常に簡単にその旨をやってのけることができます。

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

Demo

関連する問題