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

Skippr軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」前のページ

2つの異なるスクロール動作が印象的なjQueryプラグイン「multiscroll.js」次のページ

関連記事

  1. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

  2. Rate Yo!

    JavaScript

    星評価(レーティング)を簡単に実装できるjQueryプラグイン「Rate Yo!」

    Rate Yo!というjQueryプラグインを使えば、SVGを使った星…

  3. Macy.js

    JavaScript

    軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」

    Macy.jsは軽量なグリッドレイアウトを実装することができる便利なJ…

  4. Choice.js
  5. Tikslus Carousel
  6. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP