Magnific Popup でモーダルウィンドウ表示

多機能なモーダルウィンドウを簡単実装


<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
</head>

Single image lightbox


<a class="popup-image" href="/path/to/images/300x300px.png" title="キャプションが入る<strong>HTMLタグも使えます</strong>">
	<img src="/path/to/images/100x100px.png">
</a>
・・・


<script>
	$(function(){
		$('.popup-image').magnificPopup({
			type: 'image'
		});
	});
</script>

Lightbox gallery


<div class="parent-container">
	<a class="popup-image" href="/path/to/images/300x300px.png" title="キャプションが入る<strong>HTMLタグも使えます</strong>">
		<img src="/path/to/images/100x100px.png">
	</a>
	・・・
</div>


<script>
	$(function(){
		$('.parent-container').magnificPopup({
		delegate: 'a',
			type: 'image',
			gallery: { //ギャラリー表示にする
				enabled:true
		}
		});
	});
</script>

iFrame

Magnific Popup のモーダルウィンドウがiFrameとしてコンテンツを表示する。

Open YouTube
※YouTube動画ID（https://www.youtube.com/watch?v= ○○○）の形式で記述
Open Vimeo video
Open Website
Open Google Map 1
Open Google Map 2
※GoogleMapのリンクは【共有】→ 【地図を埋め込む】の方を記述。【リンクを送信する】の方の短縮URLではダメ。


<a class="popup-iframe" href="https://www.youtube.com/watch?v=YouTube動画ID ">Open YouTube</a>
<a class="popup-iframe" href="https://vimeo.com/xxxxxxxx">Open Vimeo video</a>
<a class="popup-iframe" href="https://WebsiteURL.com/">Open Website</a>
<a class="popup-iframe" href="https://www.google.com/maps/embed?pb=GoogleMapのリンク">Open Google Map </a>


<script>
	$(function(){
		$('.popup-iframe').magnificPopup({
			type: 'iframe',
			disableOn: 500, //ウィンドウ幅が500px以下だったらモーダル表示させずにリンク先へ遷移
			mainClass: 'mfp-fade',
			removalDelay: 200,
			preloader: false,
			fixedContentPos: false
		});
	});
</script>

同じページ内に書かれたHTML部分を読み込む

Magnific Popup のモーダルウィンドウにコンテンツを表示する。


<a class="popup-modal" href="#inline-wrap1">同じページ内に書かれたHTML1を読み込む</a>

<!-- 同じページ内に書かれた読み込まれる部分（#inline-wrap1） -->
<div id="inline-wrap1" class="mfp-hide inline-wrap">
	<h3>画像やテキストを表示 1</h3>
	<div class="image"><img src="/path/toimages/img.png"></div>
	<p class="text-center">キャプションを付ける1</p>
	<p class="popup-modal-dismiss"><a href="#">閉じる</a></p>
</div>


/* モーダル表示される方のためのCSS 動作には無関係なのでご自由に */
	.inline-wrap {
		position: relative;
		margin:10px auto;
		max-width: 700px;
		background: #fff;
		padding: 20px;
		}
	.inline-wrap h3 {
		font-weight: bold;
		font-size: 18px;
		margin: 0 0 10px;
		} ・・・


<script>
	$(function () {
		$('.popup-modal').magnificPopup({
			type: 'inline',
			preloader: false
		});
		//閉じるリンクの設定
		$(document).on('click', '.popup-modal-dismiss', function (e) {
			e.preventDefault();
			$.magnificPopup.close();
		});
	});
</script>

外部ファイルをモーダル表示

Magnific Popup のモーダルウィンドウに外部に置かれたファイルを表示する。


<body>
	<div><a class="ajax-popup" href="/path/to/sample.html">別ファイルのHTMLを読み込みます</a></div>
</body>

<!-- 別に置かれたファイル（sample.html） -->
<!DOCTYPE HTML>
<html lang="ja-JP">
	<head>
		<title>外部ファイルをモーダル表示</title>
		<meta charset="UTF-8">
	</head>

	<body>
		<div id="ajax-wrap">
			<h1>これは別ファイルのsample.html</h1>
			<div class="borderBox">
				<h2>Lorem ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit ・・・</p>
			</div>
			・・・
		</div>
	</body>
</html>


/* モーダル表示される方のためのCSS 動作には無関係なのでご自由に */

	#ajax-wrap {
		position: relative;
		margin:10px auto;
		max-width: 700px;
		background: #e6e6fa;
		padding: 20px;
		}


<script>
	$(function(){
	$('.ajax-popup').magnificPopup({
			type: 'ajax'
		});
	});
</script>

Zoom gallery

開閉時にズームするエフェクト付き。


<div class="zoom-gallery">
	<a href="/path/to/image/300x300.png" data-source="https://www.google.co.jp/" title="Googleサイトはこちら<br>">
		<img src="/path/to/image/100x100.png">
	</a>
	・・・
</div>


<script>
	$(document).ready(function() {
		$('.zoom-gallery').magnificPopup({
			delegate: 'a',
			type: 'image',
			closeOnContentClick: false,
			closeBtnInside: false,
			mainClass: 'mfp-with-zoom mfp-img-mobile',
			image: {
				verticalFit: true,
				titleSrc: function(item) {
					return item.el.attr('title') + ' · image source';
				}
			},
			gallery: {
				enabled: true
			},
			zoom: {
				enabled: true,
				duration: 300,
				opener: function(element) {
					return element.find('img');
				}
			}
		});
	});
</script>

画像やテキストを表示 1

キャプションを付ける1

画像やテキストを表示 2

キャプションを付ける2