ボタンを押したらモーダル【Remodal】

今回は、先日案件で使用したRemodalを紹介。

RemodalはjQueryのプラグインです。

こちらのライブラリのメリットは、JavaScript(jQuery)のコードを書くことなく、シンプルなモーダルが実装できることです。

実装例
実装方法
1. 1.必要ファイルの読み込み
  1. ファイルダウンロードの場合
  2. CDNを使用する場合
2. 2.htmlをかく。
参考記事

実装例

まずは実装例です。カスタマイズは全くしていません。

See the Pen Remodal(jQueryライブラリ) by emi (@emi-jp) on CodePen.

実装方法

必要ファイルの読み込み
htmlをかく。

1.必要ファイルの読み込み

ファイルの読み込み方法には、「ファイルダウンロード」または「CDN読み込み」の２通りあります。

読み込みが必要なファイルは下記です。

jQuery
remodal.min.js
remodal.css
remodal-default-theme.css

ファイルダウンロードの場合

公式サイトよりダウンロードしてきて読み込みます。

(1)ダウンロードボタンを押すとGithubへ。

(2)ソースコードをダウンロード

(3)ダウンロードしたファイルを解凍して必要ファイルのみ自分のフォルダへ。

CDNを使用する場合

<!-- head内で読み込む -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal-default-theme.min.css">
<!-- /.head内で読み込む -->
<!-- body終了タグ　直前で読み込む -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal.min.js"></script>
<!-- /.body終了タグ　直前で読み込む -->

2.htmlをかく。

data-remodal-xxxxxxxをそれぞれつけることで、機能が付与されます。

（data-remodal-target=”modal”を付与するとモーダルを開くトリガーになるなど）

<a data-remodal-target="modal">クリックするとモーダル開く</a>


    <div class="remodal" data-remodal-id="modal">
        <button data-remodal-action="close" class="remodal-close"></button>
        <!--閉じるボタン-->

        <p>都庁</p>
        <div><iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.490293246072!2d139.6895896152591!3d35.68955058019238!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b9df8a27%3A0x42946ae7aed8a0fc!2z5p2x5Lqs6YO95bqB56ys5LiA5pys5bqB6IiO!5e0!3m2!1sja!2sjp!4v1638856642188!5m2!1sja!2sjp"
                width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div>
        <button data-remodal-action="cancel" class="remodal-cancel">キャンセル</button>
        <!--キャンセルボタン-->
        <button data-remodal-action="confirm" class="remodal-confirm">確認</button>
        <!--確認ボタン-->

    </div>