Modal用jquery plugin『leanModal』

Modal用jquery plugin『leanModal』の使用方法です。

ダウンロード

まず、leanModalのサイトへいき、『DOWNLOAD .zip』からダウンロードします。

読み込むファイル

ダウンロードしてきたファイルを解凍し、『jquery.leanModal.min.js』をプロジェクトへ追加し、読みこむようにします。

<script type="text/javascript" src="〇〇/jquery.leanModal.min.js"></script>

CSS

cssにleanModal用の記述を追記します。

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

HTML

<!-- 読み込むModalのIDを指定 -->
<a rel="leanModal" name="demo" href="#demo">Modal Open</a>

<div id="demo">
  <p>
    Demo Contents.
  </p>
</div>

Javascript

最後にaのrel=”leanModal”をクリックでleanModalが呼ばれるようにします。

$(function(){
  $("a[rel*=leanModal]").leanModal();
});

これで、leanModalが使用できるようになりました。