×

【簡単軽量】jQueryプラグインleanModalを使ってモーダルウインドウを表示させてみよう

2016年3月27日 コーディング

leanmodal

誘導したいページのリンクを表示したり、強調したい内容を表示させるのにモーダルウィンドウがしばしば使われます。

jQueryで一から作ってもいいのですが、時間がない、面倒だという時はleanModalというjQueryプラグインが便利です。

leanModalを使ってモーダルウィンドウを実装してみましょう。

今回は、マウスクリックしたタイミングで表示させる方法と、画面表示と同じタイミングで表示させる方法を紹介します。

leanModalをダウンロードしよう

では早速leanModalを下記よりダウンロードしてください。

leanModalをダウンロード

ダウンロードしたzipファイルを解凍して、”jquery.leanModal.min.js“というjsファイルを使います。

“jquery.leanModal.min.js”を使用しているサーバーにアップロードして(場所は任意)、使用したいページのheadタグ内で”jquery.leanModal.min.js”を読み込ませてください。(下記参照)

併せてjQueryの読み込みも忘れずに。





クリックでモーダルウィンドウを表示させる方法

ボタンを用意して、ボタンをクリックしたタイミングでモーダルウィンドウを表示させます。

下記DEMO1を見て確認しましょう。

DEMO1

大きく3つに分けて考えます。

  • オーバーレイ
  • モーダルウィンドウボタン
  • モーダルウインドウ本体

モーダルウィンドウを開く

まずは上記のようにhtmlでコーディングします。


lean_overlayというid名でオーバーレイ(モーダルの後ろのページ全体を覆う背景部分)用のhtmlを用意します。


モーダルウィンドウを開く

aタグにtrigger_modalというid名をつけて、hrefで#modal_block”を指定します(modal_blockはモーダルウィンドウ本体のid名です)。



モーダルウィンドウボタンのところで出てきたmodal_blockをid名にして、モーダルウィンドウ本体をコーディングします。

DEMO1ではモーダルウィンドウにMIGOブログTOPへのリンクと、モーダルウインドウを閉じるボタンを用意します(モーダルウィンドウを閉じるボタンを構成する要素にはmodal_closeというid名を付けておきます。)。

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#modal_block {
    display: none;
    width: 700px;
    padding: 50px 45px;
    margin: 200px auto;
    background: #fff;
    border: 1px solid #313131;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#modal_block #modal_link {
	float:left;
}

#modal_block #modal_close {
	float:right;
}

#modal_block #modal_link,
#modal_block #modal_close {
    width: 285px;
    display: block;
    padding: 25px 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 5px;
    text-align: center;
}

#lean_overlay、#modal_blockはdisplay:none;にしておきます。ボタンがクリックされたタイミングでdisplay:block;に切り替わります。


jQueryはこれだけでOKです。モーダルウィンドウボタンのid名trigger_modalをクリックした時にモーダルウィンドウ本体が表示される仕組みになっています。

.leanModalでモーダルウィンドウまわりの動作の処理を行います。

leanModalでは下記のようなオプションもついています。
※オプション指定しなくてもモーダルウィンドウを表示させることはできます。

オプション 詳細
overlayOpacity オーバーレイの透過度を指定可能。0~1までの値
overlayClick モーダルウィンドウ本体以外の部分をクリックした時にモーダルウィンドウを閉じるようにするかどうかを指定可能。
true:閉じる、false:閉じない
closeButton モーダルウィンドウを閉じるボタンのid名、class名を指定可能。

画面表示と同じタイミングでモーダルウィンドウを表示させる方法

次は画面を開くと自動的にモーダルウィンドウを表示させてみます。

下記DEMO2を見て確認しましょう。

DEMO2

自動的にモーダルウィンドウが表示されたと思います。

画面を更新すると再度モーダルウインドウが開きます

「モーダルウインドウを開く」テキストがなくなった以外は”クリックでモーダルウィンドウを表示させる方法”とhtmlとCSSの構造はほぼ同じです。


$(window).load()でページ読み込み時に処理を行うようにjqueryを記述します。

.leanModalに.trigger(‘click’)を使用することで、クリックの動作を実現します。

まとめ

いかがでしたか?
簡単なコードでモーダルウィンドウを実装することができました。

時間が無い方、面倒くさがりな方におすすめです。

関連記事