javascriptとcssでポップアップを作る基本のプログラム

写真を拡大表示したり、ボタンクリックでテキストを表示する際に、ポップアップを実装すると便利です。

ここでは、javascriptとcssでポップアップを実現するための基本的なプログラムについて紹介していきます。

ポップアッププログラムのサンプル

ID名「popup」で囲われたブロックが、ポップアップで表示される領域です。

今回は画像１枚のみ表示するサンプルプログラムですが、テキストやボタン、デザインを整えたHTMLブロックも表示することができます。

HTML

CSS

javascript