jQueryプラグインのleanModalを試してみる

JavaScript

jQueryプラグインのleanModalを試してみる。

leanModal - a JQuery modal plugin that works with your CSS
http://leanmodal.finelysliced.com.au/

※バージョンは1.1を使用。

ファイルを下記のような感じで設置。

├ index.html
└ jquery.leanModal.min.js

HTMLは下記のような感じで書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.leanModal.min.js"></script>
<style>
  #lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
  }
  #sample {
    width: 400px;
    padding: 30px; 
    display:none;
    background: #FFF;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
  }  
</style>
<script>
  $(function(){
    $("a[rel*=leanModal]").leanModal();
  });
</script>
</head>
<body>
  <a rel="leanModal" href="#sample">表示</a>
  <div id="sample">
    <p>Hello, world!</p>
  </div>
</body>
</html>

デモ