超軽量jQueryプラグイン「leanModal」でモーダルウインドウを実装する方法

Web制作初心者
「jQueryプラグインで簡単にモーダルウインドウを実装したい」
こういった要望にお答えします。
本記事の内容
- leanModalの導入方法
- leanModalによる2種類のモーダルウインドウ実装方法
こんにちは、mineです。
Web制作歴は7年になります。
Web制作している上で、モーダルウィンドウがしばしば仕様として挙がります。
モーダルウインドウの用途
- ログインや新規登録を促すため(ログインボタン、新規登録ボタン)
- アラートなど強調したい内容を表示(年齢の確認)
JavaScriptもしくはjQueryで一から作成する方法は、探せばネット上に多く存在しています。しかし、時間が無く面倒だという方も多いでしょう。
この記事ではjQueryプラグイン「leanModal」を使用して簡単にモーダルウインドウを実装する方法を紹介します。
今回は下記2パターンの実装方法を紹介します。
モーダルウインドウ実装方法2パターン
- ボタンクリックでモーダルウィンドウを表示させる方法
- 画面が表示されるタイミングでモーダルウインドウも表示させる方法
leanModalをダウンロード、読み込み
まずはleanModailを使用するための準備を行います。
leanModalを下記URLへアクセスし、DOWNLOAD.ZIP
をクリックして、ファイルをダウンロードします。
leanModal – a JQuery modal plugin that works with your CSS
ダウンロードしたzipファイルを解凍して、jsファイルjquery.leanModal.min.js
があることを確認したら、jquery.leanModal.min.js
を使用しているサーバーにアップロードします(場所は任意)。
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
<script type='text/javascript' src='(任意のパス)/jquery.leanModal.min.js'></script>
<head>
内にjQueryとjquery.leanModal.min.js
を読み込ませます。
クリックでモーダルウィンドウを表示させる方法
動作イメージ

クリックで表示されるようなモーダルウィンドウを実装します。
HTML
// 1.オーバーレイ
<div id="lean_overlay"></div>
// 2.モーダルウィンドウボタン
<p><a rel="leanModal" id="trigger_modal" href="#modal_block">モーダルウィンドウを開く</a></p>
// 3.モーダルウインドウ本体
<div id="modal_block" class="modal_block clearfix">
<div id="modal_link">
<a href="/">ブログTOPへ</a>
</div>
<div id="modal_close">
モーダルウィンドウを閉じる
</div>
</div>
上記HTMLのように大きく3つの要素に分けて説明します。
- 1.オーバーレイ
- 2.モーダルウィンドウボタン
- 3.モーダルウインドウ本体
1.オーバーレイ
オーバーレイ(モーダルの後ろのページ全体を覆う背景部分)用の要素にid="lean_overlay"
をつけます。
2.モーダルウィンドウボタン
<a>
タグにid="trigger_modal"
をつけて、href="#modal_block"
を指定します(modal_block
はモーダルウィンドウ本体のid)。
3.モーダルウインドウ本体
本体の要素にid="modal_block"
をつけて、モーダルウィンドウ本体をコーディングします。DEMOではモーダルウィンドウ内にブログTOPへのリンクと、モーダルウインドウを閉じるボタンを用意します(モーダルウィンドウを閉じるボタンを構成する要素にはid="modal_close"
)。
CSS
#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;
cursor: pointer;
}
#lean_overlay
、#modal_block
はdisplay:none;
にしておきます。ボタンがクリックされたタイミング、もしくは画面が表示されたタイミングでdisplay:block;
に切り替わります。
jQuery
$(function() {
$("#trigger_modal").leanModal( { overlayOpacity: 0.4, overlayClick:true, closeButton: "#modal_close" } );
});
ボタンを用意して、ボタンをクリックしたタイミングでモーダルウィンドウを表示させます。
jQueryはこれだけでOKです。モーダルウィンドウボタン<a rel="leanModal" id="trigger_modal" href="#modal_block">
をクリックした時にモーダルウィンドウ本体が表示される仕組みになっています。
.leanModal()
でモーダルウィンドウまわりの動作の処理を行います。
画面が表示されるタイミングでモーダルウインドウも表示させる方法
動作イメージ

画面が表示されるタイミングで表示するモーダルウィンドウを実装します。
HTML/CSS
<div id="lean_overlay"></div>
<a rel="leanModal" id="trigger_modal" href="#modal_block"></a>
<p>画面を更新すると再度モーダルウインドウが開きます</p>
<div id="modal_block" class="modal_block clearfix">
<div id="modal_link">
<a href="/">ブログTOPへ</a>
</div>
<div id="modal_close">
モーダルウインドウを閉じる
</div>
</div>
クリックでモーダルウィンドウを表示させる方法”とHTMLとCSSの構造はほぼ同じです(違いはモーダルウインドウを開くボタンが無いくらい)。
jQuery
$(window).load(function() {
$("#trigger_modal").leanModal( { overlayOpacity: 0.5, overlayClick:true, closeButton: "#modal_close" } ).trigger('click');
});
$(window).load()
でページ読み込み時に処理を行うように記述します。
.leanModal()
に.trigger('click')
を使用することで、クリックの動作を実現します。
leanModalのオプション
leanModalでは下記のようなオプションが用意されています(オプション指定しなくてもモーダルウィンドウを表示させることはできます)。
今回使用したオプション
オプション | 詳細 |
---|---|
overlayOpacity | オーバーレイの透過度を指定可能。0~1までの値 |
overlayClick | モーダルウィンドウ本体以外の部分をクリックした時にモーダルウィンドウを閉じるようにするかどうかを指定可能。 true:閉じる、false:閉じない |
closeButton | モーダルウィンドウを閉じるボタンのid名、class名を指定可能。 |
まとめ
非常に簡単なコードで動作も早いモーダルウィンドウを実装することができました。
時間が無い方、1から作るのは面倒な方はぜひ使用してください。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果