jQuery/Vanilla Javascript

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
modaal

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

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

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

GitHub からmodaal.cssmodaal.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 //アニメーション速度
});

複数ポップアップの場合はギャラリー形式が可能で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>

js

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

デモimg

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>

JS

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

デモinline

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

JS

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

デモfullscreen

動画として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>

JS

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

デモvideo

別ファイルの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>

js

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

デモiframe

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

HTML

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

JS

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

デモajax

引数初期値概要
type inlineajax,inline,image,iframe,
confirm,video,instagramを設定
content_source null ボタンとモーダル要素の紐づけが必要な場合使用する
animation fade モーダル表示時のアニメーションをフェードにする。
animation_speed 300 モーダルウィンドウを表示するまでの時間。
is_lockedtrueに設定すると、背景クリックでモーダルを閉じなくする。
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コンテンツが読み込まれたとき呼び出される関数を定義できる。

使ってみた感想としては同じモーダルウィンドウ系プラグイン【Magnific Popup】よりも設定しやすかったです。
また、フルスクリーンモードやアニメーションがデフォルトでついるなどデザイン性にも優れていて、 作業短縮にもつながると思いました。

uhaha

モーダルウィンドウ系プラグインはほんといろいろ試して最終的にここに行き着いた。。。 Modaalとても気に入りました!

関連記事

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

【jQuery】簡単に実装できる時短モーダルウィンドウ「Remodal」

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

コメントを残す

*