【jQuery】モーダルプラグイン『Remodal』の実装サンプル集

【jQuery】モーダルプラグイン『Remodal』の実装サンプル集

モーダルプラグイン『Remodal』の使い方と、制作に役立つ実装サンプルをまとめてみました。

シンプル設計で軽量なので簡単に使えます。以前はプラグインを使わずにモーダルにしていたのですが、あまりにも使い勝手がいいのでモーダルが必要なウェブサイト制作時はこのプラグインを使うようにしています。スライダー（スライドショー）は『slick』、モーダルは『Remodal』、この2点はプラグイン使用がおすすめです。

モーダルってなんですか？
押すとにょんと出るやつですよー

モーダルのサンプル（デフォルト）

See the Pen 【jQuery】モーダルプラグイン『Remodal』サンプル（デフォルト） by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<a href="#modal_a">モーダルサンプル</a>
<div class="remodal" data-remodal-id="modal_a">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodalサンプル</h1>
  <p>テキスト</p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

CSS

変更なし。

サンプルページはこちら

モーダルのサンプル（モーダルボタンと閉じるボタンをカスタム）

See the Pen 【jQuery】モーダルプラグイン『Remodal』（モーダルボタンと閉じるボタンをカスタム） by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<a href="#modal_b" class="btn">Modal</a>
<div class="remodal" data-remodal-id="modal_b">
  <h1>Remodalサンプル</h1>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
</div>

CSS

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 2px solid #b4b1a0;
  color: #4c4833;
  width: 300px;
  height: 80px;
  box-sizing: border-box;
  text-decoration: none;
  transition-duration: 0.3s;
}
.btn:hover {
  background: #b4b1a0;
  color: #ffffff;
}
サンプルページはこちら

モーダルのサンプル（画像がでてくる、閉じるボタンをカスタム）

See the Pen 【jQuery】モーダルプラグイン『Remodal』サンプル（画像がでてくる、閉じるボタンをカスタム） by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<a href="#modal_c" class="btn">Modal</a>
<div class="remodal" data-remodal-id="modal_c">
  <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
  <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
</div>

CSS

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 2px solid #b4b1a0;
  color: #4c4833;
  width: 300px;
  height: 80px;
  box-sizing: border-box;
  text-decoration: none;
  transition-duration: 0.3s;
}
.btn:hover {
  background: #b4b1a0;
  color: #ffffff;
}
.remodal {
  position: relative;
  padding: 25px;
}
.remodal img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.remodal-cancel {
  color: #fff;
  background: #000000;
  width: 100%;
  margin-top: 25px;
}
.remodal-cancel:hover {
  background: #333;
}
サンプルページはこちら

モーダルのサンプル（動画がでてくる、YouTube）

See the Pen 【jQuery】モーダルプラグイン『Remodal』サンプル（YouTube動画） by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

HTML

<a href="#modal_d" class="btn">Modal</a>
<div class="remodal" data-remodal-id="modal_d">
  <!-- YouTubeをiframeで取得 -->
  <div class="embed-container"><iframe src="https://www.youtube.com/embed/VGdlkVNffC4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>

CSS

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 2px solid #b4b1a0;
  color: #4c4833;
  width: 300px;
  height: 80px;
  box-sizing: border-box;
  text-decoration: none;
  transition-duration: 0.3s;
}
.btn:hover {
  background: #b4b1a0;
  color: #ffffff;
}
.remodal {
  padding: 0;
  background: #000;
}
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

jQuery

//モーダルを閉じると動画（YouTube）も停止する
$(document).on('closing', '.YouTube', function (e) {
  var $this = $(this).find('iframe'),
      tempSrc = $this.attr('src');
  $this.attr('src', "");
  $this.attr('src', tempSrc);
});
サンプルページはこちら

モーダルのサンプル（同じページに複数モーダル）

See the Pen 【jQuery】モーダルプラグイン『Remodal』サンプル（同じページに複数モーダル） by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<section>
  <a href="#modal_01" class="btn">Modal 01</a>
  <div class="remodal" data-remodal-id="modal_01">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
  </div>
</section>
 
<section>
  <a href="#modal_02" class="btn">Modal 02</a>
  <div class="remodal" data-remodal-id="modal_02">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
  </div>
</section>
 
<section>
  <a href="#modal_03" class="btn">Modal 03</a>
  <div class="remodal" data-remodal-id="modal_03">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
  </div>
</section>
 
<section>
  <a href="#modal_04" class="btn">Modal 04</a>
  <div class="remodal" data-remodal-id="modal_04">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
    <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
  </div>
</section>

CSS

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 2px solid #b4b1a0;
  color: #4c4833;
  width: 300px;
  height: 80px;
  box-sizing: border-box;
  text-decoration: none;
  transition-duration: 0.3s;
}
.btn:hover {
  background: #b4b1a0;
  color: #ffffff;
}
.remodal {
  position: relative;
  padding: 25px;
}
.remodal img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.remodal-cancel {
  color: #fff;
  background: #000000;
  width: 100%;
  margin-top: 25px;
}
.remodal-cancel:hover {
  background: #333;
}
サンプルページはこちら

モーダルのサンプル（オプション設定してURL末尾の#〇〇を外す）

※ CodePenだとURL末尾が表示されないので、サンプルページで確認することをおすすめします。

See the Pen 【jQuery】モーダルプラグイン『Remodal』サンプル（オプション設定してURL末尾の#〇〇を外す） by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<section>
  <a data-remodal-target="modal_01" href="#" class="btn">Modal 01</a>
  <div class="remodal" data-remodal-id="modal_01" data-remodal-options="hashTracking: false">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
  </div>
</section>
 
<section>
  <a data-remodal-target="modal_02" href="#" class="btn">Modal 02</a>
  <div class="remodal" data-remodal-id="modal_02" data-remodal-options="hashTracking: false">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
  </div>
</section>
 
<section>
  <a data-remodal-target="modal_03" href="#" class="btn">Modal 03</a>
  <div class="remodal" data-remodal-id="modal_03" data-remodal-options="hashTracking: false">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
  </div>
</section>
 
<section>
  <a data-remodal-target="modal_04" href="#" class="btn">Modal 04</a>
  <div class="remodal" data-remodal-id="modal_04" data-remodal-options="hashTracking: false">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
    <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
  </div>
</section>

CSS

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 2px solid #b4b1a0;
  color: #4c4833;
  width: 300px;
  height: 80px;
  box-sizing: border-box;
  text-decoration: none;
  transition-duration: 0.3s;
}
.btn:hover {
  background: #b4b1a0;
  color: #ffffff;
}
.remodal {
  position: relative;
  padding: 25px;
}
.remodal img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.remodal-cancel {
  color: #fff;
  background: #000000;
  width: 100%;
  margin-top: 25px;
}
.remodal-cancel:hover {
  background: #333;
}
サンプルページはこちら

Remodalのダウンロード

公式サイトにある『Download 』をクリックして、『Source code(zip)』をクリックすると必要なファイルをダウンロードできます。

【jQuery】モーダルプラグイン『Remodal』の実装サンプル集

Remodalの使い方

ダウンロードファイルの中で必要なファイルは以下の3点です。

  • remodal.css
  • remodal-default-theme.css
  • remodal.min.js

HTML

<link rel="stylesheet" type="text/css" href="css/remodal.css">
<link rel="stylesheet" type="text/css" href="css/remodal-default-theme.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/remodal.min.js"></script>

CDNを使う場合は、

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal-default-theme.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal.min.js"></script>

HTML

簡単な書き方。

<!-- モーダルボタン -->
<a href="#modal">モーダルボタン</a>
 
<!-- モーダルに出てくる内容 -->
<div class="remodal" data-remodal-id="modal">
<!-- クローズボタン -->
<button data-remodal-action="close" class="remodal-close"></button>
<p>テキスト</p>
</div>

オプション設定

data-remodal-options属性を追加して設定することができます。

<div class="remodal" data-remodal-id="modal" data-remodal-options="hashTracking: false, closeOnOutsideClick: false">
オプション説明初期値
hashTrackingURL末尾の#〇〇を外したい場合はfalseを指定する。モーダルボタンでdata-remodal-target属性がhrefよりも優先になる。true
closeOnConfirmconfirmボタンをクリックするとモーダルが閉じる。falseで閉じなくできる。true
closeOnCancelcancelボタンをクリックするとモーダルが閉じる。falseで閉じなくできる。true
closeOnEscapeescキーを押すとモーダルが閉じる。falseで閉じなくできる。true
arrowsスライドの左右の矢印ボタンtrue
closeOnOutsideClickモーダル外の背景をクリックするとモーダルが閉じる。falseで閉じなくできる。true
modifierモーダルウィンドウの背景要素に任意のクラス名を追加。背景色を別パターンにしたい場合に使えるかなと。なし

イベント設定

各イベントごとにコールバック関数を受けることができます。

//モーダルが開く時
$(document).on('open', '.remodal', function () {
     //ここにに実行する処理を書く
});
 
//モーダルが開いた後
$(document).on('opened', '.remodal', function () {
     //ここにに実行する処理を書く
});
 
//モーダルが閉じる時
$(document).on('close', '.remodal', function () {
     //ここにに実行する処理を書く
});
 
//モーダルが閉じた時
$(document).on('closed', '.remodal', function () {
     //ここにに実行する処理を書く
});
 
//確認ボタンを押した時
$(document).on('confirm', '.remodal', function () {
     //ここにに実行する処理を書く
});
 
//キャンセルボタンを押した時
$(document).on('cancel', '.remodal', function () {
     //ここにに実行する処理を書く
});

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス
jQuery（英語版）

さいごに

モーダルがあると押したくなりますねー
そうですねー、アコーディオンもおすすめですよー

関連記事

【jQuery】プラグインを使わずにモーダルを作ってみる
【jQuery】アコーディオン実装サンプル10選
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

2021.10.4

5

/

13

2025

SPONSORED LINK

おすすめの広告です

広告

google

デザインのこと - Web design gallery
いつかのこと

カテゴリー

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】アコーディオン実装サンプル10選
【jQuery】アコーディオン実装サンプル10選
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集

5

/

13

2025

SPONSORED LINK

おすすめの広告です

広告

google

関連記事

7

/

10

2024

【jQuery】チェックボックスにチェックを入れるとボタンが活性化する

利用規約に同意（チェック）するとー 申し込みボタンが活性化しますー こんな感じの依頼内容だったら 実装してみましょう See the Pen 【jQuery】チェックボックスのチェックを入れるとボタンが活性化する by

...
【jQuery】チェックボックスにチェックを入れるとボタンが活性化する

デザインのメモ

12

/

22

2018

【 jQuery】プラグイン『tabs.js』で簡単にタブ切り替え

あのー、簡単にタブを作りたいのですがー じゃあ、プラグインを使って簡単に作ってみましょう 簡単にタブを作ってみる（プラグイン使用） See the Pen 【 jQuery】プラグインのtabs.jsを使って簡単にタブ切

...
【 jQuery】プラグイン『tabs.js』で簡単にタブ切り替え

デザインのメモ

7

/

27

2021

【jQuery】プラグインを使わずにモーダルを作ってみる

プラグインを使わずにモーダルってできますか？ ふむふむ、やってみましょうー プラグインを使わないモーダルのサンプル スマホでも問題ない。IEでも問題ない。完成ですー。 See the Pen 【jQuery】プラグインを

...
【jQuery】プラグインを使わずにモーダルを作ってみる

デザインのメモ

Googleさんの
おすすめ

5

/

13

2025

SPONSORED LINK

おすすめの広告です

広告

google

人気記事

2024.3.1

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

デザインのメモ

2024.7.11

【jQuery】スライダープラグイン「slick」実装サンプル集

slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...
【jQuery】スライダープラグイン「slick」実装サンプル集

デザインのメモ

2024.2.2

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 See the Pen アコーディオン、シ

...
【jQuery】アコーディオン実装サンプル10選

デザインのメモ

もっと見る

Googleさんの
おすすめ

5

/

13

2025

SPONSORED LINK

おすすめの広告です

広告

google

デザインの記事

であうにあう2025 Campaign | niko and . . .
ソラニン
  • 2025.05.03
  • ソラニン
  • 控えめに言って最高じゃないかと思う。きっと10年前も同じこと思ったんだろうなと思う…
  • いつかのこと
【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能）