Web blog WEBブログ

ポップアップ ウィンドウを作成

2019.08.08

こんにちは。コーダーの兼山です。

今回は、ポップアップ ウィンドウの作り方を紹介します。
利用者にメッセージを伝えたり、特定の操作を促したりするために用いられることが多い仕様です。

ポップアップ ウィンドウとは

ポップアップ ウィンドウとは、コンピュータの操作画面で、最前面に飛び出すように現れるウィンドウなどの表示要素のことです。

すでに表示されている他の要素に覆い被されるように出現します。

ポップアップ ウィンドウのデモ

[show popup] をクリックすることで、ポップアップウィンドウが出現し、[close popup] をクリックすることで、ポップアップウィンドウが閉じる仕様です。

ポイントは、CSS(スタイルシート)で、
#containerと#popupを非表示にしておくことです。

まとめ

デモは、シンプルにしてます。
コピーして、使用目的に応じてアレンジしてみてください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口