【jQuery】モーダル系プラグイン Magnific Popupの使用方法 #JavaScript

概要

割とカスタマイズしやすいモーダル系プラグイン。
githubのスター数も多い。

公式サイト

htmlでの読み込み

<link rel="stylesheet" href="css/magnific-popup.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.magnific-popup.js"></script>

a要素にclass属性を記述

<a class="test-popup-link" href="path-to-image.jpg">Open popup</a>

jQueryを記述

$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});

基本的にはこれだけでモーダルが起動するようになる。

親要素からデリゲートで指定

<div class="parent-container">
  <a href="path-to-image-1.jpg">Open popup 1</a>
  <a href="path-to-image-2.jpg">Open popup 2</a>
  <a href="path-to-image-3.jpg">Open popup 3</a>
</div>

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

a要素ひとつひとつにクラスをつけず、親要素にクラスをつけて記述することも可能。
ギャラリーにしたい場合はgallery:{enabled:true}オプションをつける。

コンテンツタイプ

image、iframe、inline、ajaxの4つのコンテンツタイプがある。
inlineがデフォルト。指定方法は以下の2つ。

typeオプションで指定

$('.image-link').magnificPopup({type:'image'})

mfp-TYPEというCSSクラスをボタンにつけて指定

<a class="mfp-image image-link">Open image</a>

$('.image-link').magnificPopup()

コンテンツソースの指定方法

href属性で指定

<a href="image-for-popup.jpg">Open image</a>

data-mfp-src属性で指定

<a href="some-image.jpg" data-mfp-src="image-for-popup.jpg">Open image</a>

hrefにも指定がある場合、data-mfp-src属性が優先となる。

itemsオプションで指定

$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});

オプション

オプション	デフォルト	説明
disableOn	null	falseでモーダルが起動しなくなる。function内にwindowの幅でif指定する
closeOnContentClick	false	trueでコンテンツをクリックするとモーダルが閉じる
closeBtnInside	true	falseでウインドウの右上に閉じるボタンが配置される
alignTop	false	trueでモーダルが天地中央でなく上に揃う
fixedContentPos	auto	falseでモーダルを開いた後スクロールできる
closeMarkup	`<button title="%title%" type="button" class="mfp-close">×</button>`	closeボタンの中身を変更できる。指定する際はダブルクオーテーションにや閉じタグのスラッシュの前にバックスラッシュを入れること。

closeMarkupの例

closeMarkup:"<button title=\"%title%\" type=\"button\" class=\"mfp-close\"><img src=\"../images/ico_close.png\"><\/button>"

参考URL

現場で使えるレスポンシブ対応モーダル・ポップアップjQueryプラグイン「Magnific Popup」