Remodal

  • Remodalは軽量で簡単設置、スマートフォンにも対応している、jqueryでモーダルウィンドウを実装するためのスクリプト。

    どれくらい軽量かと言うと、例えば多機能で多くのサイトで使われているfancyboxを例にあげると、

    jquery.fancybox.js → 49キロバイト

    それに比べて

    jquery.remodal.js → 9キロバイト

    min版はさらに軽量で

    jquery.remodal.min.js → 4キロバイト

    もちろん、fancyboxとの機能差はあるが、コールバックも受けられ、ちょっとしたモーダルウィンドウには十分な機能がある。
    特に、スマートフォン向けサイトのような場合は、回線速度を考え少しでも軽くすることがユーザーエクスペリエンスの向上に繋がることから導入することをおススメする。

    設置は簡単。

    まずはスタイルシートを読み込む

    CSS

    <link rel="stylesheet" href="./css/jquery.remodal.css">

    javascriptはbody閉じタグの直前に

    JAVASCRIPT

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="./js/jquery.remodal.min.js"></script>

    呼び出しボタン(リンク)

    HTML

    <a href="#modal">Click</a>

    ポップアップするモーダルウィンドウはこんな感じ

    HTML

    <div class="remodal-bg">
    	<div class="remodal" data-remodal-id="modal">
    		<h1>Remodal</h1>
    		<p>モーダルウィンドウのサンプル</p>
    	</div>
    </div>

    サンプルページ

    ブラウザの画面に表示されるClickをクリックするとモーダルウィンドウがポップアップする。

    ダウンロードはこちら
    https://github.com/VodkaBears/Remodal