JavaScript
jQuery

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

More than 3 years have passed since last update.


概要

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

githubのスター数も多い。


公式サイト

http://dimsemenov.com/plugins/magnific-popup/


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">&#215;</button>
closeボタンの中身を変更できる。指定する際はダブルクオーテーションにや閉じタグのスラッシュの前にバックスラッシュを入れること。


closeMarkupの例

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


参考URL

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