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

前回に引き続きモーダルウィンドウのプラグインを１つ。ちょっと楽しいサイトです。

■Simple Modal.js

こちらはMooToolsの、モーダルウィンドウを作るための名前通りシンプルな軽量プラグインです。アラート、コンファーム、画像、動画、Ajax、など。コールバック関数が書けたり、htmlにガシガシ書かないので楽で良い感じです。最後の例がまたこそばゆい…。

使い方

1. こちらからダウンロードできます。
   Simple Modal
   
2. 付属のMooToolsとSimpleModal(js,css)を読み込みます。
   

   code<script type="text/javascript" src=".../mootools-core-1.3.1.js"></script>
   <script type="text/javascript" src=".../mootools-more-1.3.1.1.js"></script>
   <script type="text/javascript" src=".../simple-modal.js"></script>
   

   1.3なのでAttr.nodeValueのwarningがでちゃってますが…
3. 実装
   画像のサンプルです。
   

   code<div id="modal-image"><a href="#"><img src=".../sample.jpg" alt="sample"></a></div>
   

   htmlではトリガーとなるタグにidを付けます。上記は id="modal-image"。
   あとは、スクリプトでオプションに諸々セットするだけで、モーダルウィンドウの部分をhtmlに書かなくてOKです。

   code(function($) {
     window.addEvent('domready', function(){
       /* Modal Image */
       $("modal-image").addEvent("click", function(e){
         e.stop();
         var SM = new SimpleModal({
           "onAppend":function(){
             $("simple-modal").fade("hide").fade("in")
           },
           offsetTop:"150",
           overlayColor:"rgb(255,216,216)",
         });
         SM.show({
           "model":"modal-ajax",
           "title":"Sample",
           "param":{
             "url":".../sample.jpg",
             "onRequestComplete": function(){ }
           }
         });
       })
     });
   })(document.id);
   

4. モーダルウィンドウには、class="simple-modal"
   オーバーレイには、id="simple-modal-overlay"
   がついていますので、期待通りにいかない場合はここを矯正するといいかもしれません。
   ■loader.gifの場所を変えるときは、 

   code.simple-modal.loading .simple-modal-body {
     background: url("./loader.gif");
   }
   

   ■オーバーレイの背景に白黒グラデーションがついてますので、背景色を変えたいときはbackgroundも考慮してあげないとです。

   code#simple-modal-overlay{
   	background:none;
   }
   

   といった感じです。
5. オプション（デフォルト）
   ■モーダルウィンドウ作成 

   code    options: {
           onAppend:      Function, // callback inject in DOM
           offsetTop:     40,
           overlayOpacity:.3,
           overlayColor:  "#000000",
           width:         400,
           draggable:     true,
           keyEsc:        true,
           overlayClick:  true,
           closeButton:   true, // X close button
           hideHeader:    false,
           hideFooter:    false,
           lightboxExcessWidth:40,  // Only for Modal Image (excess pixels created from skin)
           lightboxExcessHeight:120, // Only for Modal Image (excess pixels created from skin)
           btn_ok:        "OK", // Label
           btn_cancel:    "Cancel", // Label
           template:"
   
   <div class="\"simple-modal-header\"">\
   
   <h1>{_TITLE_}</h1>
   
   \</p></div>
   <div class="\"simple-modal-body\"">\
   
   <div class="\"contents\"">{_CONTENTS_}</div>
   
   \</p></div>
   <div class="\"simple-modal-footer\""> </div>
   
   "},
   

   モーダルウィンドウは、オプションのtemplateで変更できます。
6. ライセンス
   MIT-style

■MooTools
MooTools
jQuery vs MooTools
WebTecNoteThanks!