Remodal

JavaScript

レスポンシブ対応のお洒落なモーダルウィンドウを実装できるjQueryプラグイン「Remodal」

RemodalというjQueryプラグインを使えば、レスポンシブに対応したお洒落なモーダルウィンドウを実装することができます。実際のデモでは、指定された要素をクリックすると、ふんわりとモーダルウィンドウが表示されます。レスポンシブ対応とのことで、スマホやタブレットでも最適な表示をしてくれるのが嬉しいですね。

[ads_center]

Remodalの使い方

使い方は簡単です。head内にjQuery本体を読み込んだ状態で、jquery.remodal.cssとjquery.remodal.min.jsを読み込みます。

<link rel="stylesheet" href="jquery.remodal.css">
<script src="jquery.remodal.min.js"></script>

モーダルウィンドウを表示させる際に、背景を設定したい場合は以下を記述します。

<div class="remodal-bg">
・・・コンテンツ・・・
</div>

で、上記の中に入れるモーダルウィンドウのコンテンツを記述していきます。

<div class="remodal" data-remodal-id="modal">
    <h1>サンプル</h1>
    <p>サンプルテキストサンプルテキスト...</p>
    <br>
    <a class="remodal-cancel" href="#">Cancel</a>
    <a class="remodal-confirm" href="#">OK</a>
</div>

最後にモーダルウィンドウを呼び出す要素を記述すれば完了です。data-remodal-id=”modal”と設定されたコンテンツを呼び出します。

<a href="#modal">サンプル</a>

というわけで、レスポンシブに対応したモーダルウィンドウを実装したい時に覚えておきたいjQueryプラグインですね。

Remodal

関連記事

  1. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  2. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  3. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  4. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  5. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  6. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP