【Modaal】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方

Modaal

なんでもポップアップしてくれるモーダルウィンドウ系jQuery プラグインの使い方第2弾は【 Modaal 】です。
前回サンプル付きでをご紹介したMagnific Popupと比較しつつ解説していきます。

Modaalとは
Modaalの基本的な使い方
画像（gallery）形式のポップアップ
inline形式のポップアップ
フルスクリーンのポップアップ
YouTubeのポップアップ
HTMLファイルのiframeポップアップ
AJAX
サンプル
Modaalのオプション
まとめ

Modaalとは

公式サイト：
https://humaan.com/modaal/

万能モーダル系プラグインとしては Magnific Popup よりも新しく設定も簡単です。

Modaalの基本的な使い方

GitHub からmodaal.cssとmodaal.jsを取得して読み込みます。

※cdnで読み込む場合はこちらからリンクをコピーしてください。
https://www.jsdelivr.com/package/npm/modaal

<link href="css/modaal.css" rel="stylesheet" type="text/css">
<script src="js/modaal.js"></script>

jsの設定は基本的に以下のような形になります。
type:では画像、YouTubeなどのiframe、HTMLを読み込む際のajax、インラインなどを設定できます。
fullscreen: trueではフルスクリーンでポップアップ、falseでは通常のポップアップになります。

$('.gallery').modaal({
  type: 'image', //video iframe ajax confirm instagram inline
    fullscreen: true, //フルスクリーンモード
    animation_speed:800 //アニメーション速度
});

画像（gallery）形式のポップアップ

複数ポップアップの場合はギャラリー形式が可能でdata-group="group-name" の設定が必要です。

HTML

<a class="btn gallery" data-group="gallery" href="img/magnific_img01.jpg" title="Title img01">img01</a>
<a class="btn gallery" data-group="gallery" href="img/magnific_img02.jpg" title="Title img02">img02</a>
<a class="btn gallery" data-group="gallery" href="img/magnific_img03.jpg" title="Title img03">img03</a>

<script type="text/javascript">
    $('.gallery').modaal({
        type: 'image'
    });
</script>

inline形式のポップアップ

typeのデフォルトがinlineなのでtypeの設定は不要です。
ポップアップ要素にはidと style="display:none;"を設定します。

HTML

<a class="btn inline" href="#inline">inline</a>
<div id="inline" style="display:none;" class="white-popup-block">
    <h1>Modaal</h1>
    <p>インラインテキストテスト</p>
</div>

<script type="text/javascript">
    $(".inline").modaal();
</script>

フルスクリーンのポップアップ

オプションを一行追加するだけで簡単にフルスクリーンできます。

<script type="text/javascript">
    $(".inline").modaal({
    fullscreen: true
    });
</script>

YouTubeのポップアップ

動画としてYouTubeとvimeoに対応しています。
URLは以下のように設定します。
YouTube：https://www.youtube.com/embed/動画ID
vimeo：https://player.vimeo.com/video/ 動画ID

HTML

<a class="btn video" href="https://www.youtube.com/embed/w2iPKMP2a-U">YouTube</a>
<a class="btn video" href="https://player.vimeo.com/video/193641463">vimeo</a>

<script type="text/javascript">
$('.video').modaal({
    type: 'video'
});
</script>

HTMLファイルのiframeポップアップ

別ファイルのHTMLやphpをiframeで呼び出します。
※ Magnific Popup と違いGoogleマップの対応はないので、今回のデモでは埋め込みURLを貼ったhtmlをiframeで呼び出してます。

HTML

<a class="btn iframe" href="sample.html">uhaha.net</a>
<a class="btn iframe" href="map.html">map</a>

<script type="text/javascript">
$('.iframe').modaal({
    type: 'iframe',
    width: 700,
    height: 500
});
</script>

AJAX

typeをajaxに設定するだけで対応します。
他のHTMLファイルを呼び出すときなどに使用します。

HTML

<a class="btn modaal-ajax" href="sample.html">ajax</a>
<a class="btn modaal-ajax" href="map.html">map</a>

<script type="text/javascript">
$('.modaal-ajax').modaal({
    type: 'ajax'
});
</script>

サンプル

See the Pen Untitled by uhaha (@uhaha) on CodePen.

Modaalのオプション

引数	初期値	概要
type	inline	ajax,inline,image,iframe, confirm,video,instagramを設定
content_source	null	ボタンとモーダル要素の紐づけが必要な場合使用する
animation	fade	モーダル表示時のアニメーションをフェードにする。
animation_speed	300	モーダルウィンドウを表示するまでの時間。
is_locked		trueに設定すると、背景クリックでモーダルを閉じなくする。
hide_close	false	trueに設定すると、モーダルを閉じるボタンが非表示になる。
background	#000	背景オーバーレイの色を設定。
overlay_opacity	0.8	背景オーバーレイの透明度を設定。
overlay_close	true	背景オーバーレイのをクリックして閉じることができるかどうかを制御する。
accessible_title	Dialog Window	アクセシビリティの目的で使用されるaria-label属性値を設定する。
start_open	false	trueにするとロード時にModaalウィンドウが起動する。
fullscreen	false	trueに設定すると、Modaalが画面全体に表示される。
custom_class	''	モーダルラッパーに適用されるカスタムクラスを入力します
background_scroll	false	trueにすると、開いているモーダルの後ろでページをスクロールできるようになります。
close_text	Close	ボタンを閉じるテキストの文字列。
close_aria_label	Close (Press escape to close)	閉じるボタンのaria-label属性の文字列（スクリーンリーダーが読み取る値）。
width	null	モーダルの幅。
height	null	モーダルの高さ。
gallery_active_class	gallery_active_item	ギャラリー内の現在アクティブな画像または画像スライドに適用されるアクティブクラス。
outer_controls	false	trueにすると、ブラウザウィンドウの端にあるModaalラッパーの外側のnext / prevコントロールが表示される。
confirm_button_text	Confirm	確認ボタンのテキスト。
confirm_cancel_button_text	Cancel	キャンセルボタンのテキスト。
confirm_title	Confirm Title	モーダルを確認するためのタイトル。
confirm_content	<p>This is the default confirm dialog content. Replace me through the options</p>	確認メッセージのHTMLコンテンツ
loading_content	Loading …	メッセージをロードするためのHTMLコンテンツ。
loading_class	is_loading	コンテンツがAJAXを介してロードされるときに適用されるクラス名。
ajax_error_class	modaal-error	コンテンツの読み込みに失敗したときに適用されるクラス名。
instagram_id	null	InstagramのID。

関数

イベント	概要
before_open	モーダルウィンドウが開く前に呼び出される関数を定義できる。
after_open	モーダルウィンドウが開いた後、呼び出される関数を定義できる。
before_close	モーダルウィンドウが閉じた後に呼び出される関数を定義できる。
after_close	モーダルウィンドウが閉じた後、呼び出される関数を定義できる。
before_image_change	ギャラリーで画像が変更される前に呼び出される関数を定義できる。
after_image_change	ギャラリー画像が変更された後に呼び出される関数を定義できる。
confirm_callback	確認ボタンやOKボタンが押された時呼び出される関数を定義できる。
confirm_cancel_callback	キャンセルボタンが押された時呼び出される関数を定義できる。
ajax_success	AJAXコンテンツが読み込まれたとき呼び出される関数を定義できる。