Remodalは軽量で簡単設置、スマートフォンにも対応している、jqueryでモーダルウィンドウを実装するためのスクリプト。

どれくらい軽量かと言うと、例えば多機能で多くのサイトで使われているfancyboxを例にあげると、

jquery.fancybox.js　→　49キロバイト

それに比べて

jquery.remodal.js　→　9キロバイト

min版はさらに軽量で

jquery.remodal.min.js　→　4キロバイト

もちろん、fancyboxとの機能差はあるが、コールバックも受けられ、ちょっとしたモーダルウィンドウには十分な機能がある。
特に、スマートフォン向けサイトのような場合は、回線速度を考え少しでも軽くすることがユーザーエクスペリエンスの向上に繋がることから導入することをおススメする。

設置は簡単。

まずはスタイルシートを読み込む

CSS

<link rel="stylesheet" href="./css/jquery.remodal.css">

javascriptはbody閉じタグの直前に

JAVASCRIPT

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./js/jquery.remodal.min.js"></script>

呼び出しボタン（リンク）

HTML

<a href="#modal">Click</a>

ポップアップするモーダルウィンドウはこんな感じ

HTML

<div class="remodal-bg">
	<div class="remodal" data-remodal-id="modal">
		<h1>Remodal</h1>
		<p>モーダルウィンドウのサンプル</p>
	</div>
</div>

サンプルページ

ブラウザの画面に表示されるClickをクリックするとモーダルウィンドウがポップアップする。

ダウンロードはこちら
https://github.com/VodkaBears/Remodal