モーダルウィンドウ

こんにちは。
JOYCONNECTのデザイン担当、デザインマスターです。

今回はjQueryでモーダルウィンドウを自作したいと思います。

コピペで使えるコード付きなので、
jQuery初心者の方でも安心して読み進めていただける内容です。

モーダルウィンドウを実装

モーダルウィンドウ
複数のサムネイル画像を並べておき、
画像をクリックするとモーダルウィンドウで拡大画像を表示するWEBページを作成します。

HTMLには、ul/li要素で並べたサムネイル画像の後に、
「glayLayer」と「overLayer」というidをつけたdiv要素を用意します。

glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、
overLayerは子ウィンドウを表示するための要素です。

子ウィンドウに表示したい要素はoverLayer内に配置します。

CSSでは半透明レイヤー(glayLayer)をブラウザーいっぱいに表示するため、
glayLayerの親要素のbody要素、およびbody要素の親要素のhtml要素をheight:100%にします。

またopacityに対応していないIE9未満向けには独自のfilterプロパティ(filter:alpha(opacity=透明度))を設定します。

子ウィンドウ(overLayer)もposition:fixedで配置し、
topとleftに50%を設定し、margin-topに拡大画像の高さの半分のネガティブマージンを、
margin-leftに拡大画像の横幅の半分のネガティブマージンを設定すると画面中央に配置できます。

>>デモをチェックする

jQueryでモーダルウィンドウを作成する

次にjQueryを使ってサムネイル画像がクリックされたらモーダルウィンドウウィを生成し、
拡大画像を表示するスクリプトを作ります。

スクリプトですが、append()を使って、
body要素の一番後ろに<div id=’glayLayer’></div>と<div id=’overLayer’></div>を追加します。

そして#glayLayerにclickイベントを設定し、
モーダルウィンドウが開いている時にウィンドウを閉じて元の状態に戻す処理を記述しています。
半透明レイヤーがクリックされると、
半透明レイヤー(glayLayer)と子ウィンドウ(overLayer)をhide()で非表示にします。

次にclass属性がmodalのa要素に対してclickイベントを設定し、
a要素がクリックされるとglayLayerとoverLayerをshow()で表示状態に変更し、
html()を使ってoverLayerにimg要素を挿入します。

画像ではなくテキストをモーダルウィンドウに表示する

モーダルウィンドウ
先ほどは画像を表示しましたが、
画像の代わりにテキストを表示させることも可能です。

CSSは子ウィンドウ(overLayer)に対してwidthを指定していること、
margin-topとmargin-leftは設定していないことがポイントです。

といのも、大きさが一定の画像とは異なり、
テキストの場合は内容によってウィンドウのサイズが変わるためです。

そこでウィンドウを中央に表示するためのmargin-topとmargin-leftの値はjQueryで要素のサイズを取得し、調整します。

初期表示状態を作るため、hide()でdd要素を非表示に変更します。

overLayerには、クリックされたdt要素の次に出現するdd要素を隣接セレクターを使って取得し、html()を追加します。

また子ウィンドウを中央に表示するためのmargin-topとmargin-leftのネガティブマージンもclickイベントの中で設定します。

ネガティブマージンの値は、
HTMLを含んだoverLayerのwidth、heightをwidth()とheight()を使って取得し、
その半分の値を設定します。

最後に閉じるボタンをつければより使いやすいモーダルウィンドウが完成します。

>>デモをチェックする

ホームページ制作・WEBコンサルティングのご相談は無料

JOYCONNCTでは、社内の人材不足やノウハウ不足により、
WEB集客に関するお悩みを抱えられている中小企業様のサポートをしております。

TEL: 0742-55-4737/営業時間: 9:00〜18:00(平日)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事