How to pass a tag HTML attributes to a modal in Magnific Popup

What I want to do

Add the HTML attribute "data-bgcolor" to the a tag before it becomes a modal (value is #badc58)

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

I want to change the overlay color using the value of the data-bgcolor attribute when the modal opens!

I want to change the modal's background color for each image!

Normally, the HTML attributes of the element before it becomes a modal are lost, so a little ingenuity is required.

The modal is output with HTML roughly like this

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

Achieved with options

By setting the options when executing Magnific Popup as follows,
I was able to get the a tag before it became a modal.

$(".popup-image").magnificPopup({
	type: "image",
	callbacks : {
		change: function() {
			//Get the a tag before the modal
			let a = $(this.currItem.el[0]);
		},
	}
});

Here's what it looks like when written to achieve the desired functionality.

$(".popup-image").magnificPopup({
	type: "image",
	callbacks : {
		change: function() {
			//Change background color
			//Get the a tag before the modal
			let a = $(this.currItem.el[0]);
			//Get the a tag's HTML attribute
			let bgcolor = a.attr("data-bgcolor");
			//Create the color to set for the modal overlay
			let setcolor = "";
			if(bgcolor && bgcolor.match(/^\#[A-Fa-f0-9]{6}$|^\#[A-Fa-f0-9]{3}$/)){
				setcolor = bgcolor;
			}
			//Add a slight delay to wait for DOM generation
			setTimeout(function(){
				//Set background-color for the overlay
				$(".mfp-bg").css("background-color", setcolor);
			}, 10);
		},
	}
});

If you want to manipulate Magnific Popup elements (like .mfp-bg or .mfp-wrap), it might be better to add a slight delay.

Can be used as-is in gallery mode

This option can be used as-is in gallery mode.

$(".gallery-container").magnificPopup({
	delegate: "a", 
	type: "image",
	gallery: {
		enabled:true
	},
	callbacks : {
		change: function() {
			//Change background color
			//Get the a tag before the modal
			let a = $(this.currItem.el[0]);
			//Get the a tag's HTML attribute
			let bgcolor = a.attr("data-bgcolor");
			//Create the color to set for the modal overlay
			let setcolor = "";
			if(bgcolor && bgcolor.match(/^\#[A-Fa-f0-9]{6}$|^\#[A-Fa-f0-9]{3}$/)){
				setcolor = bgcolor;
			}
			//Add a slight delay to wait for DOM generation
			setTimeout(function(){
				//Set background-color for the overlay
				$(".mfp-bg").css("background-color", setcolor);
			}, 10);
		},
	}
});

Sample