超軽量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日分を取得した話
おすすめ記事 「知らないから落ちる面接の４点減点法」で面接に挑んだ結果