Help us understand the problem. What is going on with this article?

【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」

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした