front-tools

概要

配布サイト　http://leanmodal.finelysliced.com.au/
複数設置可能
jquery var 1.11.0まで確認済み

サンプル

jquery.leanModal.min.js

//複数設置対応用
$("a[rel*=leanModal]").each(function () {
  var modal = $(this).attr("href");
  $(modal).css({"display": "none"});
});
$("a[rel*=leanModal]").leanModal({
  top : 200, //モーダルの位置指定　デフォルトは中央
  overlay : 0.4, //オーバーレイの透明度
  closeButton: ".modal_close" //閉じるボタンのクラス名
});

<style type="text/css">
  #lean_overlay{
    position: fixed; z-index:100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    display: none;
  }
  #popDiv_id{
    background: #FFFFFF;
    padding: 30px;
    width: 780px;
   }
  .popDiv_class{
    background: #FFFFFF;
    padding: 30px;
    width: 780px;
   }
  .modal_close{
    position: absolute;
    top: 12px;
    right: 12px;
    display: block;
    z-index: 2;
  }
</style>

<p><a rel="leanModal" href="#popDiv_id">クリック１</a></p>
<p><a rel="leanModal" href=".popDiv_class">クリック２</a></p>
<div id="popDiv_id">
  モーダルウィンドウ内に表示する要素1
  <p class="modal_close">とじる</p>
</div>
<div class="popDiv_class">
  モーダルウィンドウ内に表示する要素2
  <p class="modal_close">とじる</p>
</div>

豆知識

クリックする側のhref=""と、ポップアップする要素の名前を共通にすれば

<a rel="leanModal" href="#popDiv_id">クリック</a>
<div id="popDiv_id">ポップアップの中</div>

でも

<a rel="leanModal" href=".popDiv_id">クリック</a>
<div class="popDiv_id">ポップアップの中</div>

でも、動きます。