cosarin.com

こさりんのブログ

ポップアップの実装

      2014/07/06


ポップアップの実装は、色々ライブラリもありますが、機能を盛り込み過ぎであったり、ライセンスの問題などで導入がめんどくさかったりするので、普段やっている簡単なポップアップの実装を紹介します。

機能

ボタンをクリックすると、画面中央にポップアップが表示される。(背景黒透過)

手順

ボタン部分をHTML+cssで作成

ポップアップを表示するボタンを作成します。
例は、IDがpopup1のポップアップを表示するためのボタンです

ポップアップ部分をHTML+cssで作成

呼び出されるポップアップを作成します。
一番外側のタグのIDをボタンのhrefの値と合わせておきます。

css部分です。共通部分と個別部分の設定を分けておくと、複数のポップアップを表示する時に都合がいいです。ポップアップの表示位置はcssで指定してもいいのですが、ポップアップの大きさがそれぞれ異なることを想定してjs側で実装しています。

js部分の実装

大きく2つのイベントを設定しています。どちらもリンクなので最後にreturn false;でキャンセルしておきます。

.popup_btnをクリックした時のイベントの流れ
表示するポップアップのwidthとheightを取得
一度ポップアップをすべて非表示(複数対応)
ポップアップにmarginを設定して表示
背景表示
.close_btn,#overlayをクリックした時のイベントの流れ
すべてのポップアップと背景を非表示

デモ

ボタン


 - javascript