なんでもポップアップしてくれるモーダルウィンドウ系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>js
<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>JS
<script type="text/javascript">
$(".inline").modaal();
</script>フルスクリーンのポップアップ
オプションを一行追加するだけで簡単にフルスクリーンできます。
JS
<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>JS
<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>js
<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>JS
<script type="text/javascript">
$('.modaal-ajax').modaal({
type: 'ajax'
});
</script>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コンテンツが読み込まれたとき呼び出される関数を定義できる。 |
まとめ
使ってみた感想としては同じモーダルウィンドウ系プラグイン【Magnific Popup】よりも設定しやすかったです。
また、フルスクリーンモードやアニメーションがデフォルトでついるなどデザイン性にも優れていて、 作業短縮にもつながると思いました。
モーダルウィンドウ系プラグインはほんといろいろ試して最終的にここに行き着いた。。。 Modaalとても気に入りました！
関連記事
【Magnific Popup】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方
【jQuery】簡単に実装できる時短モーダルウィンドウ「Remodal」
コメント