jQueryのモーダルプラグイン Remodalの使い方

これいいですよ。
– Remodal
– GitHub

Remodalの入手

Githubからもってくるのが一番手っ取り早いかと思います。GitHub
ダウンロードしたらREADMEなどいろいろなファイルが入っていますがミニマムで使うのは以下の2ファイルになります。

Remodal-master/src/remodal.css
Remodal-master/dist/remodal.min.js
(または、Remodal-master/src/remodal.js)

自分でデザインとかこだわらない人は、以下のテーマも読み込んでしまいましょう。

Remodal-master/src/remodal-default-theme.css

設定

まずはファイルを適当なところで読み込ませる。

<!-- LIBRARIES -->
<link rel="stylesheet" href="/assets/js/remodal/remodal.css">
<script src="/assets/js/remodal/remodal.min.js"></script>

Remodalの設定

ポップアップで開くブロックとその開閉のリンクを作るだけです。

ポップアップのブロック

適当なブロックを作って適当なところに配置。

<div class="remodal" data-remodal-id="modal" data-remodal-options="hashTracking:false">
    <button data-remodal-action="close" class="remodal-close"></button>
    <h1>タイトル</h1>
    <p>コンテンツを記述します。</p>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

<a data-remodal-target="modal">モーダル開く</a>

一行目のdata-remodal-idはポップアップで開くブロックに任意の名前をつけておきます。上記ではmodal。

data-remodal-id="MODALID"

最低限やることは以上で、あとのパラメーターはそのままにしておきます。というのはclass=”modal”とかはcssでdisplay:noneになっているようです。

開閉ボタンというかリンク

上記のdata-remodal-id=”MODALID”で指定した名前を同じように指定する。

<a data-remodal-target="MODALID">モーダル開く</a>

これで終わりです。
レスポンシブデザインにも対応しているので、殆どやることないです。

閉じるボタン

閉じるボタンをモーダル内につけるとき、ちょっと手こずりました。