モーダルを実装するプラグイン「Remodal」がシンプルかつ使いやすい件

JavaScript2021.05.22

モーダルを実装するjQueryのプラグインはいくつかありますが、今回紹介する「Remodal」を使ってみたら結構使いやすかったので紹介しておきます。

この記事の目次

Remodalを使う前の準備
- 必要なファイルの準備
Remodalの使い方
Remodalのカスタマイズ
- Remodalのオプション
  - オプション指定例
- Remodalのイベント

Remodalを使う前の準備

今回紹介する「Remodal」はjQueryのプラグインです。

jQueryを始め、「Remodal」を使うために必要なcssファイルが2種、JSファイルが1種あるのでそちらを用意します。

以下のリンクは画像が取得できていませんが、「Remodal」正真正銘のサイトです

Remodal

Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.

http://vodkabears.github.io/remodal/

こちらのサイトのDownloadリンクからGithubへ移動できますのでそちらからダウンロードしてください。

必要なファイルの準備

ダウンロードしたファイルは「Remodal-バージョン.zip」の形になっていると思います。

こちらのzipファイルを展開して、「dist」フォルダの中から必要なファイルを取り出していきます。

必要なものは以下の通りです

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

remodal-default-theme.css

「remodal-default-theme.css」はモーダルのアニメーションや、見た目に関する設定がまとめられているcssファイルです。

それらを調整したい場合はこちらのファイルを直接操作するか、上書きすると調整できます

remodal.css

「remodal.css」の中には表示位置に関する設定がまとめられています。

remodal.min.js

このファイルにはを動かすためのコードが入っています。

ここでは圧縮版を紹介していますが、圧縮していない方でも問題なく動きます。

各ファイルが準備できたら、head要素の中で読み込んでいきましょう。

<link rel="stylesheet" href="remodal.css">
<link rel="stylesheet" href="remodal-default-theme.css">
<link rel="stylesheet" href="style.css"><!--自前のcss-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="remodal.min.js"></script>

これで、ファイルの準備は完了です

Remodalの使い方

Remodalはモーダルを作るためのプラグインなので、開くためのボタンと表示する要素が必要ですので用意していきます。

ユーザーの操作で表示する要素

表示したい要素は自由に作ってもらっていいと思いますが、いくつか便利なパーツが用意されていますのでそちらも併用していくと捗るのではないかと思います。

<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button><!--閉じるボタン-->
  <p>サンプル</p>
  <button data-remodal-action="cancel" class="remodal-cancel">キャンセル</button><!--キャンセルボタン-->
  <button data-remodal-action="confirm" class="remodal-confirm">確認</button><!--確認ボタン-->
</div>

<button data-remodal-action="cancel" class="remodal-cancel">キャンセル</button>

</div>

data-remodal-id属性(1行目)

表示したい部分全体を囲んでいる要素には「data-remodal-id属性」を指定しておき、開くためのボタンと連動させていきます。

更にクラス属性で「remodal」を付けておく必要があります

data-remodal-action属性(2.4.5行目)

data-remodal-action属性を『close』にすると閉じるボタンの機能が加わり、『cancel』だとキャンセルボタンの機能、『confirm』だと確認ボタンとして機能していきます。

各ボタンはデフォルトの設定だと、モーダルを閉じる仕様になっていますが、後述するイベントと組み合わせて使うこともできるので、必要に応じて設定しましょう

もともとついているクラスは任意のものに変えても大丈夫ですが、予めそれぞれのボタンの装飾が用意されているので、そのままで使いたい場合は、クラスは変更しないほうが良いと思います。

開くためのボタン

隠していた要素を開くためのボタンを用意するときは以下のように記述します。

<!--data-remodal-target属性を使う-->
<a data-remodal-target="modal">要素を表示</a>

1 2	<!--data-remodal-target属性を使う--> <a data-remodal-target="modal">要素を表示</a>

data-remodal-target属性

data-remodal-target属性は連動させ表示したい要素に付けた「data-remodal-id属性」と値を同じにします。

こちらの方法であればa要素以外の要素でも、モーダルのボタンとして使うことができます

JSは特別必要なし

それぞれの属性さえきっちりと設定できていればJSのコードを追加する必要はありません。

以下実装サンプルになります。

サンプル

要素を表示

サンプル

Remodalのカスタマイズ

Remodalにはカスタマイズ用のオプションとイベントが用意されていて状況によって便利に使えます

Remodalのオプション

オプションは「data-remodal-options属性」を使ってHTML内に配置した、隠しておいて表示したい要素に指定します。

cssのプロパティを指定する方法とよく似ていて、複数指定する事もでき、複数指定する際は半角のカンマで区切って指定します。

<!--オプション指定-->
data-remodal-options="オプション名:値"

<!--オプションを複数指定-->
data-remodal-options="オプション名:値,オプション名:値"

data-remodal-options="オプション名:値"

data-remodal-options="オプション名:値,オプション名:値"

用意されているオプションは以下のとおりです。

オプション名	デフォルト値	効果
hashTracking	true	URL末尾に#〇〇を付けたくない場合はfalseを指定する
closeOnConfirm	true	「data-remodal-action=”confirm”」で作った確認ボタンをクリックしたときの動作。falseで閉じなくなる
closeOnCancel	true	「data-remodal-action=”cancel”」で作ったキャンセルボタンをクリックしたときの動作。falseで閉じなくなる
closeOnEscape	true	escキーを押したときの動作。falseで閉じなくなる
closeOnOutsideClick	true	モーダル外の背景をクリックしたときの動作。falseで閉じなくなる
modifier	なし	モーダルの背景に生成される要素に任意のクラス名を追加

オプション指定例

例えばURL末尾の邪魔な文字列を消すオプションと、モーダルの背景に出てくる要素にクラス「background」を追加するようにオプションを使うのであれば以下のように記述します。

ついでにcssの方にクラス「background」に背景色でも追加しておきます

<a data-remodal-target="modal">要素を表示</a>

<div class="remodal" data-remodal-id="modal" data-remodal-options="hashTracking:false,modifier:background">
  <button data-remodal-action="close" class="remodal-close"></button><!--閉じるボタン-->
  <p>サンプル</p>
  <button data-remodal-action="cancel" class="remodal-cancel">キャンセル</button><!--キャンセルボタン-->
  <button data-remodal-action="confirm" class="remodal-confirm">確認</button><!--確認ボタン-->
</div>

<a data-remodal-target="modal">要素を表示</a>

<button data-remodal-action="cancel" class="remodal-cancel">キャンセル</button>

</div>

.background{
  background-color: rgba(255, 0, 0, 0.2);
}

.background{

background-color: rgba(255, 0, 0, 0.2);

}

オプション使ったサンプル

要素を表示

サンプルなのでこういう形にしていますが、背景色を変えたいなら普通にcssを使うほうが良いと思います

サンプルなのでこういう形にしていますが、背景色を変えたいなら「.remodal-overlay」に直接スタイル指定をするほうが良いと思います

Remodalのイベント

Remodalには各種イベントが用意されて、こちらを利用すれば細かい処理も可能になります。

//モーダルが開く最中
$(document).on('opening', '.remodal', function() {
  //モーダルが開く最中に実行する処理
});

//モーダルが開き終わったとき
$(document).on('opened', '.remodal', function() {
  //モーダルが開き終わったときに実行する処理
});

//モーダルが閉じる最中
$(document).on('closing', '.remodal', function() {
  //モーダルが閉じる最中に実行する処理
});

//モーダルが閉じた後
$(document).on('closed', '.remodal', function() {
  //モーダルが閉じた後に実行する処理
});

//確認ボタンを押したとき
$(document).on('confirmation', '.remodal', function() {
  //確認ボタンを押したときに実行する処理
});

//キャンセルボタンを押したとき
$(document).on('cancellation', '.remodal', function() {
  //キャンセルボタンを押したときに実行する処理
});

//モーダルが開く最中

$(document).on('opening', '.remodal', function() {

//モーダルが開く最中に実行する処理

});

//モーダルが開き終わったとき

$(document).on('opened', '.remodal', function() {

//モーダルが開き終わったときに実行する処理

});

//モーダルが閉じる最中

$(document).on('closing', '.remodal', function() {

//モーダルが閉じる最中に実行する処理

});

//モーダルが閉じた後

$(document).on('closed', '.remodal', function() {

//モーダルが閉じた後に実行する処理

});

//確認ボタンを押したとき

$(document).on('confirmation', '.remodal', function() {

//確認ボタンを押したときに実行する処理

});

//キャンセルボタンを押したとき

$(document).on('cancellation', '.remodal', function() {

//キャンセルボタンを押したときに実行する処理

});