Weblasts

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

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

Remodalを使う前の準備

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

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

以下のリンクは画像が取得できていませんが、「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要素の中で読み込んでいきましょう。

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

Remodalの使い方

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

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

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

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

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

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

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

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

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

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

開くためのボタン

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

data-remodal-target属性

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

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

JSは特別必要なし

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

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

サンプル
要素を表示

サンプル

Remodalのカスタマイズ

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

Remodalのオプション

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

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

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

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

オプション指定例

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

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

オプション使ったサンプル
要素を表示

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

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

Remodalのイベント

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