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>
ポップアップで開くブロックとその開閉のリンクを作るだけです。
適当なブロックを作って適当なところに配置。
<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>
これで終わりです。
レスポンシブデザインにも対応しているので、殆どやることないです。
閉じるボタンをモーダル内につけるとき、ちょっと手こずりました。