Magnific PopupでaタグのHTML属性をモーダルに引き継ぐ方法

2026-03-13

jQueryのプラグイン「Magnific Popup」で､aタグに付けたHTML属性をモーダルに渡す方法をご紹介します｡

やりたいこと

モーダルとなる前のaタグにHTML属性「data-bgcolor」属性を付与 (値は#badc58)

<a href="img.jpg" class="popup-image" data-bgcolor="#badc58"><img src="img.jpg"></a>

モーダルを開いた先で､data-bgcolor属性の値を使用して､オーバーレイの色を変えたい！

画像ごとに､モーダルの背景色を変えたい！

普通にやると､モーダルとなる前の要素のHTML属性は普通に失われるので､ひと工夫必要です｡

およそこのようなHTMLでモーダル出力される

<div class="mfp-bg"></div>
<div class="mfp-wrap">
	<div class="mfp-container">
		<div class="mfp-content">
			<div class="mfp-figure">
				<img class="mfp-img" src="img.jpg">
			</div>
		</div>
	</div>
</div>

オプションでできた

Magnific Popupを実行する際のオプションを次のようにすることで､
モーダルとなる前のaタグを取得することができました｡

$(".popup-image").magnificPopup({
	type: "image",
	callbacks : {
		change: function() {
			//モーダル前のaタグを取得
			let a = $(this.currItem.el[0]);
		},
	}
});

やりたかったところまで書くとこんな感じ｡

$(".popup-image").magnificPopup({
	type: "image",
	callbacks : {
		change: function() {
			//背景色を変更
			//モーダル前のaタグを取得
			let a = $(this.currItem.el[0]);
			//aタグのHTML属性を取得
			let bgcolor = a.attr("data-bgcolor");
			//モーダルのオーバーレイにセットするカラーを作成
			let setcolor = "";
			if(bgcolor && bgcolor.match(/^\#[A-Fa-f0-9]{6}$|^\#[A-Fa-f0-9]{3}$/)){
				setcolor = bgcolor;
			}
			//DOM生成されるのを待つために少し遅延を入れて
			setTimeout(function(){
				//オーバーレイにbackground-colorをセット
				$(".mfp-bg").css("background-color", setcolor);
			}, 10);
		},
	}
});

Magnific Popupの要素 (.mfp-bg や .mfp-wrap など) をいじりたい場合､少し遅延を入れてあげたほうがいいかもしれません｡

ギャラリーモードでもそのまま使える

このオプションは､ギャラリーモードでもそのまま使えます｡

$(".gallery-container").magnificPopup({
	delegate: "a", 
	type: "image",
	gallery: {
		enabled:true
	},
	callbacks : {
		change: function() {
			//背景色を変更
			//モーダル前のaタグを取得
			let a = $(this.currItem.el[0]);
			//aタグのHTML属性を取得
			let bgcolor = a.attr("data-bgcolor");
			//モーダルのオーバーレイにセットするカラーを作成
			let setcolor = "";
			if(bgcolor && bgcolor.match(/^\#[A-Fa-f0-9]{6}$|^\#[A-Fa-f0-9]{3}$/)){
				setcolor = bgcolor;
			}
			//DOM生成されるのを待つために少し遅延を入れて
			setTimeout(function(){
				//オーバーレイにbackground-colorをセット
				$(".mfp-bg").css("background-color", setcolor);
			}, 10);
		},
	}
});

サンプル