iziModalの通知バー版はこちら
iziToastで超簡単に通知バーを作成 - Qiita
0.はじめに
「ねえ、ちょっとモーダルウィンドウ作ってみてよJavaScriptで」
そんなこと言われて「え?」となった経験はありませんか?
「ほら、あのサイト行ったら最初に出てくるでしょ。あんな感じで作ってくれない?」
「は、はあ…」
といった感じで作り始めるわけですが、
「そもそもJavaScriptよくわからんし、どうすりゃいいんだ…」
となった時に、iziModalを使えばその悩みを解決できるかもしれません。
ApacheLicense2.0で商用利用可ですし(重要)
1.作り方
iziModalを使うことでおしゃれで軽量なモーダルウィンドウを超簡単に作成することができます。
下記サイトの「Download」から、jsとcssを入手します。
まず、これを使用するためにはjQueryとjquery-migrateが必要です。
下記サイトからそれぞれjsファイルをダウンロードしてきます。
jQuery
GitHub - jquery/jquery-migrate: APIs and features removed from jQuery core
適当なディレクトリを準備してください。
それぞれのファイルを以下のような構成で配置します。
.
├── css
│ ├── iziModal.css
│ └── iziModal.min.css
├── index.html
└── js
├── iziModal.js
├── iziModal.min.js
├── jquery-3.3.1.js
├── jquery-3.3.1.min.js
├── jquery-3.3.1.min.map
├── jquery-migrate-3.0.1.js
└── jquery-migrate-3.0.1.min.js
index.htmlをこのような感じで作成します。
<link rel="stylesheet" type="text/css" href="./css/iziModal.css" media="screen" />
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="./js/jquery-migrate-3.0.1.js"></script>
<script type="text/javascript" src="./js/iziModal.js"></script>
<script type="text/javascript">
$(function() {
$(".iziModal").iziModal();
})
</script>
<button data-izimodal-open=".iziModal">ボタン</button>
<div class="iziModal" data-izimodal-title="タイトル" data-izimodal-subtitle="サブタイトル">
<p>コンテンツ</p>
</div>
たったこれだけでモーダルウィンドウを作成することができました。
2.応用
画像やリンクの遷移先としてモーダルウィンドウを出したい
リンクの場合
<a href="#" data-izimodal-open=".iziModal">リンク</a>
画像の場合
<img src="img/hogehoge.jpg" data-izimodal-open=".iziModal"/>
複数のモーダルをグループ表示させたい
groupオプションで複数のモーダルをグループ化できます。
グループ化することで、モーダルの左右に<>ボタンが出現しモーダルを遷移させることができます。
loopオプションで最後尾に到達したら、最前列にループするようになります。
<script type="text/javascript">
$(function() {
$(".iziModal_group").iziModal({
group: "group01",
loop: true,
});
})
</script>
<button data-izimodal-open=".iziModal_group">ボタン</button>
<div class="iziModal_group">
<p>コンテンツ1</p>
</div>
<div class="iziModal_group">
<p>コンテンツ2</p>
</div>
またオプションはこのように、タグの方にも設定可能です。
どちらも全く同じ設定になります。
<script type="text/javascript">
$(function() {
$(".iziModal_group").iziModal();
})
</script>
<button data-izimodal-open=".iziModal_group">ボタン</button>
<div class="iziModal_group" data-izimodal-group="group01" data-izimodal-loop=true>
<p>コンテンツ1</p>
</div>
<div class="iziModal_group" data-izimodal-group="group01" data-izimodal-loop=true>
<p>コンテンツ2</p>
</div>
iframeを使ってモーダルウィンドウでYouTubeやニコ動を再生したい
iframeオプションを有効にすることで、別ページの内容を展開することが可能です。
fullscreenオプションを有効にすることで、ヘッダーにフルスクリーンボタンが出現します。
iframeURLオプションにYouTubeとニコ動のURLを埋め込んで再生できるようにしました。
<script type="text/javascript">
$(function() {
$(".iziModal_iframe").iziModal({
iframe: true,
fullscreen: true,
group: "group01",
loop: true,
title: ".iziModal_iframe",
});
})
</script>
<button data-izimodal-open=".iziModal_iframe">ボタン</button>
<div class="iziModal_iframe" data-izimodal-iframeURL="https://www.youtube.com/embed/${VIDEO_ID}"></div>
<div class="iziModal_iframe" data-izimodal-iframeURL="https://embed.nicovideo.jp/watch/${VIDEO_ID}"></div>
表示位置を調整したい
styleを使うことで表示位置を調整できます。
transitionInオプションとtransitionOutオプションでモーダルの出現方法の変更が可能です。
<script type="text/javascript">
$(function() {
$(".iziModal1").iziModal({
title:".iziModal1",
transitionIn:"fadeInLeft",
transitionOut:"fadeOutDown",
});
$(".iziModal2").iziModal({
title:".iziModal2",
transitionIn:"fadeInDown",
transitionOut:"fadeOutLeft",
});
$(".iziModal3").iziModal({
title:".iziModal3",
transitionIn:"fadeInRight",
transitionOut:"fadeOutUp",
});
$(".iziModal4").iziModal({
title:".iziModal4",
transitionIn:"fadeInUp",
transitionOut:"fadeOutRight",
});
})
</script>
<button data-izimodal-open=".iziModal1">ボタン</button>
<div class="iziModal1" style="margin-right: 0px; margin-top: 0px;" data-izimodal-open=".iziModal2">
<p>コンテンツ</p>
</div>
<div class="iziModal2" style="margin-right: 0px; margin-bottom: 0px;" data-izimodal-open=".iziModal3">
<p>コンテンツ</p>
</div>
<div class="iziModal3" style="margin-left: 0px; margin-bottom: 0px;" data-izimodal-open=".iziModal4">
<p>コンテンツ</p>
</div>
<div class="iziModal4" style="margin-left: 0px; margin-top: 0px;" data-izimodal-open=".iziModal1">
<p>コンテンツ</p>
</div>