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

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

■leanModal.js

シンプルでいい感じ。

使い方

  1. こちらからダウンロードできます。
    leanModal.js
    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
    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. オプション
    サイト参照!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA