ウェブデザイナーの毎日のお仕事のメモ

作成日:2020.11.12  最終更新日:2021.01.04

js / jQuery

簡単にモーダルを実装するRemodal.js(jsプラグイン)の使い方

モーダルを簡単に実装できるRemodal.jsの使い方のメモです。

Remodalの使い方手順

①ファイルのダウンロード

Remodalのページ にアクセスして、DOWNLOADのリンクを押下。(Githubのページに遷移します。)

zipかtar.gz、ご自身の環境に合わせてどちらかをダウンロードします。

②必要なファイルを任意のフォルダに設置する

ダウンロードしたファイルは以下のような公正になっています。

実際に必要なのは、

  • remodal.css
  • remoda-default-theme.css
  • remodal.js

の3つのファイルですので、任意のフォルダこれらのファイルを設置してください。
※minファイルもありますので、ご自身の用途に合わせてください。

③ファイルを読み込む

※ファイルの読み込みパスは、ご自身の環境に合わせて変更してください。
※remodal.jsを読み込む前にjqueryも読み込んでおきます。

<link rel="stylesheet" href="remodal.css">
<link rel="stylesheet" href="remodal-default-theme.css">
<script src='jquery.js'></script>
<script src="remodal.js"></script>

④JS・HTMLにremoadl.jsを動かすコードを書く

HTML

まずは、モーダルを起動させる(開く)ためのリンクを準備します。

<a href="#modal">モーダルを開く</a>

もしくは、

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

とも書けるようです。

そして、モーダル部分の記述は以下の通りです。

<div class="remodal" data-remodal-id="modal">
 <button data-remodal-action="close" class="remodal-close"></button>
 <p>ここにテキストなどを入れることができます。<br>ご自身の用途に合わせて中身を変更してください。</p>
</div>

.remodal のdivの中身はご自身の用途に合わせて書き換えてください。

以下、サンプルです。モーダルを開くボタンを押してください。

最新記事