商品写真や施工写真を大きく見せたい、情報を全部載せたら画面が一杯になって見ずらいから、クリックしたらポッと出てくるアレでなんとかならないか？
そんなご要望を実現するのが「モーダル機能」です。ポップアップ機能と呼ぶこともありますし、これを実現するための代表的なjavascriptの名称から（話の流れでは）lightboxと呼ぶ人もいます。
写真、動画、文章など大抵のものは対応可能ですので、是非ご相談ください。
というわけで、今日はクリックで写真や動画、詳細情報をポップアップ表示するモーダルの実装についてです。
なんでもポップアップできる「featherlight」の実装
モーダルと言えばやはりlightboxです。今でも写真の拡大表示だけなら古来から使われているlightboxで十分ですが、汎用性を考えると「featherlight」がオススメです。
Featherlightは画像はもちろん、動画やテキスト、iframeにも対応しているため、クライアントからどんな要望が飛んできても大抵のことは対応可能。最初に入れておけば後々も安心の一点です。
ではfeatherlightの実装方法です。まずは公式からファイルをダウンロードです。
必要なのは
- featherlight.js
- featherlight.css
の2点。こいつを
<script src="任意の場所/featherlight.js"></script>
<link rel="stylesheet" href="任意の場所/featherlight.css">
<style>
.lightbox{ display:none; }
</style>ってな感じでhead内に組み込みます。
上記のstyleは必須のもので、クラス名はなんでもいいんですがポップアップ内容を一旦非表示にしておくためのものです。サイトのcssファイルに追記してください。
下ごしらえが完了したらbody内のポップアップの現場にGOです。
ここからはポップアップさせるもの別に見てみましょう。featherlightはポップアップを表示させるリンク部分とポップアップの中身を別々に用意し、idで紐づける仕組みです。id名もお好きなものでかまいません。
画像をポップアップさせる
リンク
<a href="javascript:void(0)" data-featherlight="#modal-img">画像のポップアップ</a>ポップアップ内容
<div class="lightbox" id="modal-img">
<img src="ポップアップさせる画像">
</div>テキストをポップアップさせる
リンク
<a href="javascript:void(0)" data-featherlight="#modal-txt">テキストのポップアップ</a>ポップアップ内容
<div class="lightbox" id="modal-txt">
<p>ポップアップさせる文章です。HTMLで</p>
</div>動画をポップアップさせる
動画の場合はモーダル内にいい感じのサイズで動画が収まるように下記のCSSを追記しておきます。
iframeのheightはお使いの動画のサイズに合わせて調整してください。
.featherlight-content{
width:70%;
}
.youtube{
line-height:0;
}
.youtube .video,
.youtube video{
width:100%;
}
.youtube iframe{
width:100%;
height:39vw;
}リンク
<a href="javascript:void(0)" data-featherlight="#modal-video">動画のポップアップ</a>ポップアップ内容
<div class="lightbox" id="modal-video">
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/gk_fHQzGeB8?autoplay=1&rel=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>こんなところでしょうか。
特にテキストのポップアップはHTMLが使えるので、例えば商品写真と説明文の組み合わせなんかも可能です。その可能性は無限大といえましょう。
それではまた。
