jQueryでモーダルウィンドウ表示を行いたい時に使えるのがRemodalです。カスタマイズが多彩、軽量といった特徴があります。

Remodalのインストール

まず手順としてスタイルシートとJavaScriptを読み込みます。

<link rel="stylesheet" href="path/to/your/jquery.remodal.css">  
<script src="path/to/your/jquery.remodal.min.js"></script>  

次にHTML全体をクラスで囲みます（背景を暗くするためです）。

  
 ここにHTMLを記述  

  

そしてモーダルウィンドウで表示する内容を記述します。

  

# Remodal
  

Flat, responsive, lightweight, fast, easy customizable modal window plugin  
 with declarative state notation and hash tracking.

  
  
  
[Cancel](#)  
[OK](#)  

  

後はクリックするHTMLを記述します。

[Call the modal with data-remodal-id="modal"](#modal)  

これで完了です。

イベントのトラッキングも多彩で、各イベントごとにコールバックを受けられます。

$(document).on('open', '.remodal', function () {  
 var modal = $(this);  
});  
$(document).on('opened', '.remodal', function () {  
 var modal = $(this);  
});  
$(document).on('close', '.remodal', function () {  
 var modal = $(this);  
});  
$(document).on('closed', '.remodal', function () {  
 var modal = $(this);  
});  
$(document).on('confirm', '.remodal', function () {  
 var modal = $(this);  
});  
$(document).on('cancel', '.remodal', function () {  
 var modal = $(this);  
});  

実際、処理としては記述する内容が多いので、自分好みにカスタマイズできる範囲が大きそうです。デザインはフラットで使い勝手良さそうですが、カスタマイズももちろん可能です。なおZepto.jsとの組み合わせも利用可能です。

RemodalはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

VodkaBears/Remodal
Remodal