アニメーション、アラートに長けるモーダルウィンドウ系プラグイン iziModal .jsの使い方、サンプルの解説になります。上記に加えYouTubeやVimeoなどの動画・ GoogleMap ・ Ajaxの読み込み、フルスクリーンなども可能です。

基本的なiziModalの使い方

iziModal公式サイト
よりiziModal-master.zipをダウンロードします。
iziModal.cssとiziModal.jsを読み込みます。

<link href="css/iziModal.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/iziModal.js"></script>

ボタンとインライン要素を以下のように記述しdata-izimodal-open属性で#modalで紐づけします。

<a href="#" data-izimodal-open="#modal" class="btn">Modal</a>
<div id="modal">基本のモーダル</div>

jsでは #modalを指定したら基本的な設定は終了です。

<script>
$(function(){

//基本のモーダル1
$('#modal').iziModal();

});//jQuery
</script>

クリックしたときの起動について

基本的にはボタンのほうにdata-izimodal-openを設定しますが、属性がない場合でも以下のように設定できます。

js

<script>
$(function(){

//open-modalをクリックした場合
$(document).on('click', '.open-modal', function(event) {
  event.preventDefault();
  $('#modal-wrap01').iziModal('open');
});
$('#modal-wrap01').iziModal({
    fullscreen: true,
    padding: 50
});

});//jQuery
</script>

HTML

<a class="btn open-modal">open-modalが付与されているボタン</a>
<div id="modal-wrap01">
  <p>open-modalをクリックしたときに起動</p>
</div><!-- modal-wrap -->

iframe（YouTube・GoogleMap）

iframeの設定ではiframeをtrueにし、URLを設定します。
このとき使用するURLは埋め込みタグに設定されているURLになります。

YouTubeなら共有→埋め込む→iframeのsrcに設定されているURLです。

GoogleMapでは共有→地図を埋め込む→ iframeのsrcに設定されているURLです。

js

<script>
$(function(){

//iframeモーダルYouTube
$("#iziModal_iframe").iziModal({
    iframe : true,
    fullscreen: true
});

});//jQuery
</script>

HTML

<button data-iziModal-open="#iziModal_iframe" class="btn">YouTube</button>
<div id="iziModal_iframe" data-izimodal-title="data-izimodal-title" data-izimodal-subtitle="data-izimodal-subtitle" data-izimodal-iframeURL="https://www.youtube.com/embed/j8eZ3573PD0">
</div>

Ajax

以下のajax_sample.html部分に読み込むファイルのパスを設定します。

<script>
$(function(){
//ajaxモーダル
$("#iziModal_ajax").iziModal({
    onOpening: function(modal){
        modal.startLoading();
        $.get('ajax_sample.html', function(data) {
            $("#iziModal_ajax .iziModal-content").html(data);
            modal.stopLoading();
        });
    }
});

});//jQuery
</script>

HTML

<button data-iziModal-open="#iziModal_ajax" class="btn">Ajax</button>
<div id="iziModal_ajax">

1つのjs設定でiziModalを複数表示する

iziModalで同じ形式のモーダルをそれぞれ複数呼び出す方法になります。
ボタン側にdata-iziModal-openを設定しiziModals1、iziModals2...とし、
モーダル側のクラスに呼び出し用のクラスiziModalsとそれぞれのクラスiziModals1、iziModals2... を設定します。

data-izimodal-groupを設定することでグループ化もできます。
グループ化するとモーダル1表示時にモーダル2、モーダル3と矢印で切り替えることができます。

HTML

<button data-iziModal-open=".iziModals1" class="btn">iziModal01</button>
<div class="iziModals iziModals1" data-izimodal-title="data-izimodal-title" data-izimodal-subtitle="subtitle" data-izimodal-group="group01">0101
</div>

<button data-iziModal-open=".iziModals2" class="btn">iziModal02</button>
<div class="iziModals iziModals2" data-izimodal-title="data-izimodal-title" data-izimodal-subtitle="subtitle" data-izimodal-group="group01">0202
</div>

<button data-iziModal-open=".iziModals3" class="btn">iziModal03</button>
<div class="iziModals iziModals3" data-izimodal-title="data-izimodal-title" data-izimodal-subtitle="subtitle" data-izimodal-group="group01">0202
</div>

JS

<script>
$(function(){

//1つの設定でiziModalを複数表示する
$(".iziModals").iziModal({
    fullscreen: true,
    padding: 50
});

});//jQuery
</script>

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

iziModalで作るアラート

iziModalのオプションを駆使すればモーダルをアラートのように表示することができます。

設定のポイントとしては以下になります。

アクセス時に表示する → autoOpen:true
timeoutを設定する → timeout: 10000
プログレスバーを表示する → timeoutProgressbar
表示位置をページ下部にする → bottom:0
オーバーレイを無効化してドキュメントでリンクなどの操作ができるようにしておく。 → overlay: false

//アラート
$("#modal_alert").iziModal({
    headerColor: '#000',
    width: '100%',
    autoOpen:true, //ページロード時に表示
    timeout: 10000, //10秒で非表示
    pauseOnHover: true,　//マウスオーバーでカウントダウン停止
    timeoutProgressbar: true, //プログレスバーの表示
    timeoutProgressbarColor: 'rgba(255,0,0,1.0)',//プログレスバーの色
    bottom:0,
    overlay: false//Color overlay.
});

See the Pen iziModal demo2 by uhaha (@uhaha) on CodePen.

※ブラウザの下部に表示されます。

オプション

オプションででスタイルやアニメーション、モーダルの形式などが変更できます。

オプションの種類

引数	初期値	概要
title	''	ヘッダー部分のタイトル
subtitle	''	ヘッダー部分のサブタイトル
headerColor	'#6d7d8d'	ヘッダー部分の色
background	'null'	モーダル部分の背景
theme	''	値が無いとヘッダーの文字色が薄く、"light". にすると文字の色が濃くなる
attached	''	画面の上部または下部にモーダルを取り付ける
appendTo	'body'	ファイル内にモーダルの記述を育成する場所の指定
appendToOverlay	'body'	ファイル内にモーダルのオーバーレイの記述を育成する場所の指定
icon	null	ヘッダーに表示されるアイコンの設定
iconText	null	ヘッダーに表示されるテキストアイコンの設定
iconColor	''	アイコンの色
rtl	false	trueにするとテキストが右寄せになる
width	600	モーダルの幅。パーセント指定も可能
top	null	上部の静的マージン
bottom	null	下部の静的マージン
borderBottom	true	モーダルの下部の線
padding	0	モーダルの内側の余白 cssのpadding
radius	3	モーダルの角丸
zindex	999	cssのz-index
iframe	false	YouTubeなどiframe形式時はtrue
iframeHeight	400	iframeの高さ
iframeURL	null	iframeのURL
focusInput	true	trueに設定すると、モーダルを開くたびに、最初の表示フィールドがアクティブになる
group	''	同じ「グループ」名でグループを作成し、それらの間を移動できるようにする
loop	false	同じグループのモーダルでループする
arrowKeys	true	矢印による制御を有効にする
navigateCaption	true	ナビゲートする矢印を表示する
navigateArrows	true	矢印の位置を変更して、モーダル間を移動する 'closeToModal'または 'closeScreenEdge'の値がある
history	false	ハッシュを使用して閲覧履歴を有効にする
restoreDefaultContent	false	モーダルをデフォルトにリセットして、再度開きます。
autoOpen	0 or false	trueの場合、ページロード時などに自動的に開きます。または、開く遅延時間（ミリ秒単位）を設定できます。
bodyOverflow	false	trueにするとモーダルを開いたとき、ドキュメントのスクロールを無効にする
fullscreen	false	ヘッダーにフルスクリーンボタンが表示される
openFullscreen	false	モーダルを開いた時点でフルスクリーンになる
closeOnEscape	true	trueに設定すると、Escキーを押下時にモーダルを閉じる
closeButton	true	ヘッダーに閉じるボタンを表示する
overlay	true	背景オーバーレイを有効または無効にする
overlayClose	true	背景オーバーレイをクリックしてもモーダルが閉じる
overlayColor	'rgba(0,0,0,0.4)'	オーバーレイの色
timeout	0 or false	モーダルを閉じるまでの時間をミリ秒単位で設定する
timeoutProgressbar	false	プログレスバーを有効する
timeoutProgressbarColor	'rgba(255,255,255,0.5)'	プログレスバーの色
pauseOnHover	false	モーダルにオンマウスしたら、プログレスバーを一時停止します。
transitionIn	'comingIn'	モーダルを開くときのアニメーションを以下に設定できる comingIn, bounceInDown, bounceInUp, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX.
transitionOut	'comingOut'	モーダルを閉じるときのアニメーションを以下に設定できる comingOut, bounceOutDown, bounceOutUp, fadeOutDown, fadeOutUp, , fadeOutLeft, fadeOutRight, flipOutX.
transitionInOverlay	'fadeIn'	オーバーレイが開くときのデフォルトのアニメーション
transitionOutOverlay	'fadeOut'	オーバーレイが閉じるときのデフォルトのアニメーション
onFullscreen	function() {}	モーダルがフルスクリーンを有効または無効にしたときに実行されるコールバック関数
onResize	function() {}	サイズ変更が発生したときに実行されるコールバック関数
onOpening	function() {}	モーダルを開いたときに実行されるコールバック関数
onOpened	function() {}	モーダルが開いているときに実行されるコールバック関数
onClosing	function() {}	モーダルを閉じるときに実行されるコールバック関数
onClosed	function() {}	モーダルが閉じられたときに実行されるコールバック関数
afterRender	function() {}	モーダルの準備ができたときに実行されるコールバック関数

オプションの記述例

$("#modal").iziModal({
    title: '',
    subtitle: '',
    headerColor: '#aab454',
    background: null,
    theme: 'light',
    icon: null,
    iconText: null,
    iconColor: '',
    rtl: false,
    width: '100%',
    top: null,
    bottom: null,
    borderBottom: true,
    padding: 0,
    radius: 3,
    zindex: 999,
    iframe: false,
    iframeHeight: 400,
    iframeURL: null,
    focusInput: true,
    group: '',
    loop: false,
    arrowKeys: true,
    navigateCaption: true,
    navigateArrows: true,
    history: false,
    restoreDefaultContent: false,
    autoOpen: 0,
    bodyOverflow: false,
    fullscreen: false,
    openFullscreen: false,
    closeOnEscape: true,
    closeButton: true,
    appendTo: 'body',
    appendToOverlay: 'body',
    overlay: true,
    overlayClose: true,
    overlayColor: 'rgba(0, 0, 0, 0.4)',
    timeout: false,
    timeoutProgressbar: false,
    pauseOnHover: false,
    timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
    transitionIn: 'comingIn',
    transitionOut: 'comingOut',
    transitionInOverlay: 'fadeIn',
    transitionOutOverlay: 'fadeOut',
    onFullscreen: function(){},
    onResize: function(){},
    onOpening: function(){},
    onOpened: function(){},
    onClosing: function(){},
    onClosed: function(){},
    afterRender: function(){}
});

設定はjsでもタグ内の属性でも可能です。
それぞれ設定の仕方は以下の通りになります。

オプションをタグの属性で設定する場合の例

jsで使用したオプションの名前に「data-izimodal-」を付けます。

HTML

<a href="#" data-izimodal-open="#modal_full2" class="btn">Modal</a>
<div id="modal_full2" data-izimodal-title="属性で変更title" data-izimodal-subtitle="属性で変更subtitle" data-izimodal-headerColor="#aab454" data-izimodal-padding="50">style変更のモーダル2</div>

js

<script>
$(function(){

$('#modal_full2').iziModal();

});//jQuery
</script>

まとめ

同じモーダルウィンドウ系プラグインのremodaalなどに比べて設定は少し複雑でしたがデザインやオプションの幅広さに長けていると感じました。
Remodaalだとデザイン的に少しシンプルすぎという方におすすめです。
またモーダルウィンドウ系で同じjs設定で複数表示する方法が意外と簡単に実装可能なのにマイナーだと思いました。

モーダルモーダル~

2021-01-12

【ScrollReveal + CSS animation】スクロール時のアニメーション基本と応用について

jQuery/Vanilla Javascript webデザイン

ScrollReveal

ScrollRevealとはスクロール時にふわっと表示されるようなアニメーション設定に便利なプラグインです。今回はバージョンアップしたv4.0.7の基本的な使い方とcssアニメーションとの組み合わせでぼかしの表示の仕方を紹介します。

ScrollRevealの基本的な設定
ぼかしを使ったアニメーション
まとめ

ScrollRevealの基本的な設定

以下よりダウンロードします。
緑ボタン【Code】から【Download Zip】を選択します。
ScrollReveal　GitHHub

jsファイルの読み込みます。

<script src="js/scrollreveal.min.js"></script>

アニメーションしたい表示要素にクラス wrap_contentを設定

<div class="wrap_content">
    <div><img src="img/img01.jpg" alt=""></div>
    <div><img src="img/img02.jpg" alt=""></div>
    <div><img src="img/img03.jpg" alt=""></div>
</div><!-- wrap_content -->

.wrap_contentに対してオプションを設定します。

<script>
$(document).ready(function() {
ScrollReveal().reveal('.wrap_content', {
    origin: 'bottom',//移動の開始方向
    distance: '5%',//移動の長さ
    delay: 0,//アニメーション待機時間
    duration: 800,//アニメーション時間
    reset: false,//falseで表示したままに
});
});//jQuery

</script>

スクロール時に下からふわっと表示されるようになります。

ぼかしを使ったアニメーション

※IE11ではぼかし加工は未対応です。

cssアニメーションと組み合わせでScrollRevealでは用意されていない動きを実現することができます。

ぼかし加工用クラスblr_setとぼかしリセット用クラスblr_resetを用意してぼやけた要素がスクロールと同時にピントが合うようなアニメーションを作成します。

.blr_set{
    filter: blur(10px);
    transition: all 0.8s ease;
}
.blr_reset{
    filter: blur(0px);
}

HTMLでの要素にはぼかし用のクラスblr_setを追加しておきます。

<div class="wrap_content blr_set">
    <div><img src="img/img01.jpg" alt=""></div>
    <div><img src="img/img02.jpg" alt=""></div>
    <div><img src="img/img03.jpg" alt=""></div>
</div><!-- wrap_content -->

ScrollReveal()の処理後に実行されるafterRevealにぼかし加工のリセット用クラスblr_resetを追加するように設定します。

cssでtransition: all 0.8s ease;を設定しているのでこのときアニメーション時間durationを0秒にしておきます。

<script>
$(document).ready(function() {
ScrollReveal().reveal('.wrap_content', {
    origin: 'bottom',//移動の開始方向
    distance: '5%',//移動の長さ
  delay: 0,//アニメーション待機時間
    duration: 0,//アニメーション時間
  reset: false,//falseで表示したままに
    afterReveal: function (el){
        el.classList.add('blr_reset');
    }
});
});//jQuery

</script>

See the Pen ScrollReveal demo by uhaha (@uhaha) on CodePen.

まとめ

スクロール時の表示アニメーションでは個人的にScrollRevealがとても使いやすいと思っていました。今回のバージョンで前々から気になっていたシンタックスエラーも解消されていたので改めて紹介しました。
cssアニメーションとの組み合わせることで表示方法が広がっていくのも強みの一つです。

やはり人気のプラグインはどんどん改修されてよくなっていきますね！

2020-11-09

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

jQuery/Vanilla Javascript

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コンテンツが読み込まれたとき呼び出される関数を定義できる。

まとめ

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

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

基本的なiziModalの使い方

クリックしたときの起動について

js

HTML

iframe（YouTube・GoogleMap）

js

HTML

Ajax

HTML

1つのjs設定でiziModalを複数表示する

HTML

JS

iziModalで作るアラート

オプション

オプションの種類

オプションの記述例

オプションをタグの属性で設定する場合の例

HTML

js

まとめ

ScrollRevealの基本的な設定

ぼかしを使ったアニメーション

まとめ

Modaalとは

Modaalの基本的な使い方

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

inline形式のポップアップ

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

YouTubeのポップアップ

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

AJAX

サンプル

Modaalのオプション

関数

まとめ

関連記事