解説
lightbox風jQueryプラグイン[Magnific Popup]のご紹介です。 lightboxのように同一ウィンドウ内でポップアップして写真などを見せるプラグインです。 画像の表示、ギャラリーの表示、iframeの表示など用途はありますが、 今回は指定要素を表示させる案件があり、このプラグインが一番簡単で、 レスポンシブにも対応していたので使うことにしました。 そのメモを書きたいと思います。 プラグインの配布サイト「http://dimsemenov.com/plugins/magnific-popup/」 表示のサンプル「http://codepen.io/collection/nLcqo//」 下記のデモでは、ID指定した箇所の写真とテキストのインライン要素を表示させるサンプルです。
HTML
上記のサンプルにした場合のHTMLソースです。
<h2>インラインで要素を表示</h2>
<a class="popup-modal" href="#inline-wrap">インライン要素を開く</a>
<div id="inline-wrap" class="mfp-hide">
<h1>風景</h1>
<div class="image">
<img src="iris.jpg" width="481" height="321">
</div>
<p> 松森蒼穹(そら)に後光を出せば
<br>
<br> 片頬黒い県会議員が
<br>
<br> ひとりゆっくりあるいてくる
<br>
<br>
<br> 羊歯やこならの丘いちめんに
<br>
<br> ことしも燃えるアイリスの花
</p>
<p class="popup-modal-dismiss">
<a href="#">閉じる</a>
</p>
</div>
CSS
CSSは下記のファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="magnific-popup.css"/>
<style>
/*inline*/
#inline-wrap {
position: relative;
margin:10px auto;
max-width: 95%;
background: #fff;
padding: 20px;
text-align:center;
font-size: 90%;
font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}
#inline-wrap h1 {
font-size: 100%;
}
#inline-wrap .image img {
max-width: 240px;
height:auto;
}
</style>
jQuery
jQueryは下記のファイルを読み込みます。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.magnific-popup.js"></script>
<script>
//inline
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>
