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

Programming Web

Web制作者

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を読み込ませます。

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

動作イメージ

leanmodal動作イメージ

クリックで表示されるようなモーダルウィンドウを実装します。

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_blockdisplay: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()でモーダルウィンドウまわりの動作の処理を行います。

画面が表示されるタイミングでモーダルウインドウも表示させる方法

動作イメージ

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日分を取得した話

おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ

おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】