ども！
コーダーやフロントエンドの方は実務でモーダルを実装する機会が多いかと思います。
最近パッとモーダルを実装する方法ないかなー。と探してたところ「Remodal」というプラグインを見つけて
使ってみたらシンプルですぐ実装できたので紹介します。
実装サンプル
読み込むだけで以下のようになります。
実装方法
実装方法は主に２つあります。
- ZIPファイルのダウンロード
- CDNで読み込み
どちらの方法もjQuery必須ですので忘れずに読み込んでください
ダウンロードして使う場合
公式サイトからDownloadをクリックしてもらい「Source code(zip)」をクリックするとダウンロードされます。
必要なファイルは/Remodal-1.1.1 2/dist/の中にある
- remodal.css
- remodal-default-theme.css
- remodal.min.js
の３つです。
これらをプロジェクトの中に入れてもらいHTMLで読み込みます。
<link rel="stylesheet" type="text/css" href="css/remodal.css">
<link rel="stylesheet" type="text/css" href="css/remodal-default-theme.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/remodal.min.js"></script>CDNの場合
CDNで読み込む場合は以下です。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal-default-theme.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.js"></script>どちらの場合でもjqueryの読み込みの後にremodal.jsを読み込むようにしてください。
Remodalの使い方
Remodalを使うには当たり前ですが、開くための要素と開いた時に表示する要素が必要です。
data-remodal-○○と指定することで閉じたり開いたりの機能を付与します。
上のサンプルを使って説明しますね。
表示する中身
<div class="remodal" data-remodal-id="modal">
<p>ここにモーダルの内容が表示される</p>
<button data-remodal-action="close" class="remodal-close"></button>
</div>表示する要素の一番外側にはdata-remodal-id属性を指定します。ここをあとから記述するトリガーとなる要素と合わせることで連動します。
次にdata-remodal-action属性ですがcloseにすることで閉じるボタンの役割を果たすことができます。他にもcancelにするとキャンセルボタン、confirmだと確認ボタンとして機能します。
トリガーとなる要素
モーダルを表示させるためのボタンは以下のようになります。
<a data-remodal-target="modal" >ここをクリックすると</a>data-remodal-target属性はモーダル表示させたい要素のdata-remodal-idと値を揃えることで連動させることができます。
今回はaタグを使っていますがdata-remodal-属性が揃っていれば要素はなんでも大丈夫です。
オプションの設定
data-remodal-options属性を追加することでオプションの設定も可能です。
data-remodal-options="オプション名:値"オプション名 | 効果 | デフォルト |
|---|---|---|
hashTracking | URL末尾に#〇〇を付けたくない場合はfalseを指定する | true |
closeOnConfirm | 「data-remodal-action=”confirm”」で作った確認ボタンをクリックしたときの動作。falseで閉じなくなる | true |
closeOnCancel | 「data-remodal-action=”cancel”」で作ったキャンセルボタンをクリックしたときの動作。falseで閉じなくなる | true |
closeOnEscape | escキーを押したときの動作。falseで閉じなくなる | true |
closeOnOutsideClick | モーダル外の背景をクリックしたときの動作。falseで閉じなくなる | true |
modifier | モーダルの背景に生成される要素に任意のクラス名を追加 | なし |
まとめ
いかがでしたか？
以前は自作でモーダルを作っていたのですがRemodalを使うとjavascriptを書かなくても基本的モーダルの機能を実装することができます。
レイヤーなども事前に用意されているのでかなり時間を短縮することができます。