ポップアップ
ポップアップってボタンをクリックするとフワッと表示されるこんなやつです。
レスポンシブ対応する時に、いい感じに表示できるプラグインLity.jsを導入する方法です。
導入方法
まずは公式配布サイトから必要なファイルをダウンロード。 公式サイト zipファイルがをダウンロードしてきて、解凍します。解凍したファイルの中で、使用するファイルは「lity.min.js」と「lity.min.css」です。
Lity.jsはjQueryに依存しますので、しっかりjQueryも読み込ませます。
<link rel="stylesheet" href="lity.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="lity.min.js"></script>//画像
<a href="img01.jpg" data-lity="data-lity">image</a>
//表示したいボックス要素を「class="lity-hide"」で非表示
<a href="#inline" data-lity="data-lity">inline</a>
<div id="inline" class="lity-hide">
<img src="img02.jpg" alt="">
</div>
//Google Map
<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity="data-lity">Google Map</a>
//youtube
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity="data-lity">youtube</a>