【jQuery】モーダルウィンドウ

モーダルウィンドウを簡単に作成するjQueryプラグインを２つ。

■leanModal.js

シンプルでいい感じ。

使い方

1. こちらからダウンロードできます。
   leanModal.js
   

    

2. jQueryの後に、読み込みましょう。

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

3. スタイルシートへ追加します。ポイントは display:none とすること。

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

4. モーダルウィンドウ表示は、leanModalの関数を呼び出します。
   アンカーリンクから呼ぶ場合は、

    

   code$("#trigger_id").leanModal();
   

   あるいは、同じページに複数のモーダルウィンドウがある場合は、rel属性を追加するなどして関数を呼び出します。

   code$("a[rel*=leanModal]").leanModal();
   

   こんな感じです。

5. オプション
   シンプルなため、オプションも少しです。
   ■モーダルウィンドウの垂直位置：デフォルトは上から100px
   ■オーバーレイの不透明度：デフォルトは0.5
   ■閉じるボタンオプション：デフォルトはnull

    

   code$("#trigger_id").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" });
   

■POP EASH

こちらは、ビデオやiframe対応もあり、約2KBです。

使い方

1. こちらからダウンロードできます。
   POP EASY
   
2. jQueryの後に、読み込みます。

   code<script type="text/javascript" src="js/site.js"></script>
   

3. 実装
   

   html

   code<a class="modalLink" href="#">Click Me</a>
   <div class="overlay"> </div>
   <div class="modal"><a class="closeBtn" href="#">Close Me</a> <!-- content here --></div>
   

   css

   code.overlay{
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
   display: none;
   }
   .modal{
   display: none;
   background:#eee;
   padding:0 20px 20px;
   overflow:auto;
   z-index:1001;
   position:absolute;
   width: 500px;
   min-height: 300px;
   }
   

4. オプション
   サイト参照！