【jQuery】わずか2KBの軽量モーダルプラグイン leanModal.js

JavaScript

ishida

2013.08.26

イメージ

昨日、娘と「ドキドキプリキュアミュージカル」を見に行ってきました ishida です。
アニメのエンディングテーマをかなりの回数踊っていたので、僕の踊れるようになったかも！？

さて、今回は jQuery モーダルプラグインのご紹介です。

これまで、モーダルウィンドウの実装は Colorbox でいいんじゃね？と思ってましたが、
モーダル内の要素が、ajax や iframe ではなくてページ内にて非表示にしているパータンの場合には以下のライブラリのほうがいいかも。

leanModal.js

かなりざっくりですが、サンプルデモはこちら

HTML/JS

HTML/JSのコードは、以下です。

<h1>leadModal.js test</h1>

<p><a href="#test" rel="leanModal">モーダル表示</a></p>

<div id="test" class="modal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero purus, convallis nec vestibulum eget, luctus vitae purus. Vestibulum non mauris et sem vulputate pellentesque ac a turpis. Ut vel lacus vitae justo vestibulum lobortis. Nunc ipsum ipsum, laoreet id dictum nec, fermentum vel purus. Maecenas nisl felis, faucibus non rutrum eu, sollicitudin sed ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dignissim lacinia tempus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Nulla accumsan pellentesque velit, a malesuada diam tristique a. Fusce eleifend magna erat, et imperdiet orci. Quisque sapien mauris, malesuada eu tristique pulvinar, placerat id ligula. Vivamus vitae viverra nulla. Donec eget turpis vel erat malesuada sodales.</p>
</div>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript">
$(function() {
  $('a[rel*=leanModal]').leanModal({
    overlay : 0.8
  });
});
</script>

CSS

CSSのコードは、以下です。
オーバーレイ用と、モーダル用の2つだけ設定すればOK。

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

}

.modal {
    display: none;
    width: 500px;
    padding: 10px 20px;
    background: #FFF;
}