しょぼしょぼプログラマ雑記

自分のための備忘録。 開発記録など掲載してます。 質問・ご意見・ご感想等はTwitter ( https://twitter.com/yun_hokuto ) までお気軽にどうぞ。

軽量なモーダル「Remodal」が使いやすかった

jQueryでモーダル表示は種類が沢山ありますが、軽量かつ単純な「Remodal」というライブラリが

非常に使いやすかったのでご紹介します

ただ、紹介前に一つ注意喚起があります

このライブラリを使う上で参考にさせて頂いたサイト様が多数ありますが

間違った翻訳内容を記載している

サイト様が非常に多かったです

具体的には「他の紹介サイトから内容をほとんどコピーしていて、実際には使っていない」というものがほとんどでした

ですので、自分が使ってみたときの方法なども記載しておきます

0.jQueryをダウンロードする

jQueryのライブラリですから、当たり前な話ですが記載します

1.ライブラリをダウンロードする

これは普通にダウンロードすればOKですね

ダウンロード先は こちら になります(公式サイト)

2.JSファイルとCSSファイルを組み込む

ダウンロードした中(ver.0.6.3時点では、srcディレクトリ直下)にある下記のファイルを使います

なお、2つは普通にJSファイルとCSSファイルですので、組み込み方は割愛します

3.モーダルで出したい領域を作成する

モーダルで出したい領域をdivタグで下記のように作ります(このあたりは公式から抜粋)

<div class="remodal" data-remodal-id="notice" id="modal-area">
    <!-- モーダルのタイトル -->
    <h1>Remodal Title</h1>
    <!-- モーダル表示の本文 -->
    <p>Modal Contents.</p>
    <br>
    <!-- キャンセルボタン -->
    <a class="remodal-cancel" href="#">Cancel</a>
    <!-- OKボタン -->
    <a class="remodal-confirm" href="#">OK</a>
</div>

この時、ポイントがあります

  • モーダル領域にしたいdivタグのクラスに「remodal」をつける(「remodal」クラスが付いた領域内がモーダルになる)
  • モーダル領域にしたいdivタグのdata属性に「data-remodal-id="任意の文字列"」をつける(モーダル領域を識別する際に使用)
  • キャンセルボタンを作る場合はaタグのクラスに「remodal-cancel」をつける
  • OKボタンを作る場合はaタグのクラスに「remodal-confirm」をつける

なお、デフォルトでcloseボタンが付くみたいですので、OKやキャンセルボタンが必要ない場合は未記入でもOKのようです

4.モーダルを表示させる

モーダルを表示させる方法は大きく分けで2パターンあります

  1. リンク(aタグ)で起動させる
  2. Javascriptで起動させる

まずはA.の方法

こちらは下記のようにすればOK

<a href="#notice">モーダル出すよ</a>

<!-- または -->

<a data-remodal-target="notice">モーダル出すよ!</a>

ここで記載している「notice」は3の「data-remodal-id」を指定します

続いてBの方法

$(function() {
  $('[data-remodal-id=notice]').remodal().open();
});

// または

var modalInstance = $.remodal.lookup[$('[data-remodal-id=notice]').data('remodal')];
modalInstance .open();   // モーダルを出す
modalInstance .close();  // モーダルを閉じる

こちらはそのままですね

なお、この場合はoptionが指定できるみたいです

自分は今回optionを指定していませんが、optionの詳細へのリンクを記載しておきます

Remodalのオプションについて(英文)

おまけ(イベント)

さて、モーダルを出すだけならこれで終了なのですが、ここからはオマケです

主にJavascriptで各種イベントを取得する方法になります

イベントの一覧は 公式(英文) にありますので、

今回は使い方だけです

$(document).on('confirm', '.remodal', function () {
    console.log('confirm');
});

公式にて、この書き方で「OKボタンが押された際のイベント」が取得できます

んで、これ何してるかって言うと下記のような内容っぽいです

$(document).on('イベント名', 'モーダル領域を指定するもの', 'コールバック');

ですので、今回の場合は下記のような記述方法でも動きます

$(document).on('confirm', '#modal-area', function () {
    console.log('confirm');
});

はい、モーダル用div領域に記載したid属性でも取得が可能です

これなら、内部で振り分け処理を書かなくても、各モーダルのIDごとにコールバックのイベントが作れます


以上が今回のRemodalの使い方などでした

これくらい書いてあれば大体わかるかな?

海外製のライブラリって日本語サイトがないので、貴重な資料として残していきたいです

この内容が、どなたかのエンジニア様の役に立ちますように