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

作成日:2019.10.02  最終更新日:2021.03.07

js / jQuery

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

モーダルは自分で組もうと思うと結構面倒なので、私はいつもModaalを使っています。とても便利なjsプラグインです。
動画をモーダルで表示できたり、フォトギャラリーが作れたり、汎用性の高いプラグインかと思います。
使い方もとても簡単なので、メモ。

Modaalの使い方手順

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

Modaalのページ にアクセスして、DOWNLOAD FROM GITHUBボタンを押下。(Githubのページに遷移します。)

緑色のCodeボタンを押下して、Download ZIPを押下すると、ファイルをダウンロードできます。

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

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

実際に必要なのは、

  • modaal.css
  • modaal.js

の2つのファイルですので、任意のフォルダこれらのファイルを設置してください。
(上記2ファイルは、ダウンロードしたフォルダの中の、distかsourceフォルダに入っています。)
※minファイルもありますので、ご自身の用途に合わせてください。

③ファイルを読み込む

※ファイルの読み込みパスは、ご自身の環境に合わせて変更してください。

<link rel="stylesheet" href="modaal.css">
<script src='jquery.js'></script>
<script src="modaal.js"></script>

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

HTML

<a href="#inline" class="inline">モーダルを表示するリンク</a>

<div id="inline" style="display:none;>
    <p>ここにモーダル内に表示させたいコンテンツを準備する。</p>
</div>

jQuery

$(".inline").modaal();

Modaalのカスタマイズ色々

モーダル内にをモーダルを閉じるボタンを追加する方法

デフォルトで、モーダルの外側にモーダルを閉じるボタンがあるのですが、

例えば、モーダル内に、テキストリンクで、『×閉じる』などを追加する方法のメモです。

HTML

<a href="#inline" class="inline">モーダルを表示するリンク</a>

 <div id="inline" style="display:none;">
     <p>ここにモーダル内に表示させたいコンテンツを準備する。</p>
     <p><a class="inline_close">×閉じる</a></p>
 </div>

JS

$(".inline").modaal();
$('.inline_close').click(function(){
  $('.inline').modaal('close');
});

『閉じる』をクリックしたら、モーダルを閉じる、という処理を追記します。

フルスクリーンモード(全画面表示)にする方法

これは、私も知らなかったのですが、フルスクリーンモード(全画面表示)でモーダルを開くことができるようです!

HTML

<a href="#inline" class="inline">モーダルを表示するリンク</a>

 <div id="inline" style="display:none;">
     <p>ここにモーダル内に表示させたいコンテンツを準備する。</p>
     <p><a class="inline_close">×閉じる</a></p>
 </div>

JS

$(".inline").modaal({
  fullscreen: true
});

複数画像のギャラリーをつくる方法

事前準備として、サムネイル用の画像と、大きく表示したい画像の準備が必要です。

HTML

aタグに、data-group="gallery"をいれます。

<ul>
 <li><a href="モーダルで表示したい画像のパス" data-group="gallery" class="gallery"><img src="サムネイルの画像のパス" alt=""></a></li>
 <li><a href="モーダルで表示したい画像のパス" data-group="gallery" class="gallery"><img src="サムネイルの画像のパス" alt=""></a></li>
 <li><a href="モーダルで表示したい画像のパス" data-group="gallery" class="gallery"><img src="サムネイルの画像のパス" alt=""></a></li>
 <li><a href="モーダルで表示したい画像のパス" data-group="gallery" class="gallery"><img src="サムネイルの画像のパス" alt=""></a></li>
</ul>

JS

$(".gallery").modaal({
 type: 'image'
});

youtubeをモーダルで開く方法

aタグのhrefに開きたいyoutubeのリンクを貼ります。

※ここの部分の注意ですが、youtubeのリンクは、youtubeの埋め込みたい動画のページにある『共有』のボタンを押して、『埋め込み』のボタンを押してから表示される、iframe内に記述のあるURLをコピーしてきてください。

HTML

<a href="https://www.youtube.com/embed/TPSqnNa-M8U" class="video">Youtubeを開くためのリンク</a>

JS

$('.video').modaal({
	type: 'video'
});

最新記事