_popup.scss

/* Simple Popup  */

.popup {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 30;
	opacity: 0;
	visibility: hidden;
	display: flex;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 20px;

	transition-property: opacity, visibility;
	transition-duration: 0.3s;

	&::before {
		content: "";
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: calc(100% + 200px); // need for fix issue on mobile devices
		background-color: rgba(0,0,0, 0.5);
		transform: translateY(-60px); // need for fix issue on mobile devices
	}

	.popup__container {
		max-width: 750px;
		width: 100%;
		margin: auto;
		padding: 30px 0;
	}

	.popup__content {
		background-color: #fff;
		padding: 20px;
		transform: translateY(-20px);

		transition-property: transform;
		transition-duration: 0.3s;

		iframe {

		}
	}

	.popup__iframe-wrapper {
		position: relative;
		padding-top: 56.25%; // 16:9

		iframe {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	h2 {
		margin-bottom: 30px;
		font-size: 38px;
	}

	p + p {
		margin-top: 15px;
	}

	.popup__close-button {
		margin: 10px 0;
		padding: 5px 10px;
		background-color: #dadada;
		text-transform: uppercase;
		font-weight: bold;
	}


	// Popup open state
	&.popup--open {
		opacity: 1;
		visibility: visible;

		.popup__content {
			transform: translateY(0);
		}
	}
}

example-popup.liquid

<div style="margin: 30px; padding: 15px; border: 2px solid red;">
	<p><a href="#" class="js-open-popup" data-popup-id="popup-01">Open Popup 1</a></p>
	<p><a href="#" class="js-open-popup" data-popup-id="popup-02">Open Popup 2</a></p>
	<p><a href="#" class="js-open-popup" data-popup-id="popup-03" data-popup-youtube="https://www.youtube.com/watch?v=jiwuQ6UHMQg">Open Popup 3 (youtube)</a></p>
</div>

<div id="popup-01" class="popup js-popup">
	<div class="popup__container">
		<div class="popup__content">
			<button class="popup__close-button js-close-popup">Close 1</button>
			<h2>Popup 1</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
		</div>
	</div>
</div>

<div id="popup-02" class="popup js-popup">
	<div class="popup__container">
		<div class="popup__content">
			<button class="popup__close-button js-close-popup">Close 2</button>
			<h2>Popup 2</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptatibus iusto eaque
				voluptate suscipit temporibus voluptatem voluptas cumque quibusdam perferendis mollitia
				nesciunt quos, id debitis, dolorum inventore illo autem maxime.
			</p>
		</div>
	</div>
</div>

<div id="popup-03" class="popup js-popup">
	<div class="popup__container">
		<div class="popup__content">
			<button class="js-close-popup">Close</button>
		</div>
	</div>
</div>

popup.js

import * as bodyScrollLock from "body-scroll-lock";
import $ from "jquery";

;(function() {
	/* Custom POPUP */

	let popupLinks = $('.js-open-popup');
	let popupOpenClass = 'popup--open';
	let popupCloseButton = $('.js-close-popup');

	popupLinks.on('click', function(e) {
		e.preventDefault();

		let popupId = $(this).attr('data-popup-id');
		let popup = $('#' + popupId);

		if (popup.length < 1) {
			console.log('Popup not found');
			return;
		}

		$(document).trigger('popup:open', [popup, popupId]);

		popup.addClass(popupOpenClass);
		bodyScrollLock.disableBodyScroll(popup[0]);
	});

	popupCloseButton.on('click', function() {
		let popup = $(this).parents('.js-popup');
		let popupId = popup.attr('id');

		$(document).trigger('popup:close', [popup, popupId]);
		popup.removeClass(popupOpenClass);
	});

	/* Custom Events */

	$(document).on('popup:open', function(e, popup, popupId) {
		console.log(popupId, ' POPUP is open');
	});

	$(document).on('popup:close', function(event, popup, popupId) {
		console.log(popupId, ' POPUP is closed');
		bodyScrollLock.clearAllBodyScrollLocks();
	});
}());