Untitled

<!doctype>
<html>
	<head>
		<title>How-to CSS Modal Popup</title>
		<style>

			button {
				background-color: orange;
				border: none;
				border-radius: 3px;
				color: #ffffff;
				cursor: pointer;
				line-height: 2rem;
				outline: none;
				padding: 0 24px;
			}

			.modal {
				background-color: rgba(0,0,0,0.5);
				cursor: pointer;
				opacity: 0;
				position: fixed; top: 0; left: 0;
				transition: 0.4s opacity ease-in-out;
				visibility: hidden;
				width: 0; height: 0;
			}

			.modal.modal-opacity,
			.modal.modal-on {
				bottom: 0; right: 0;
				padding: 24px;
				visibility: visible;
				width: auto; height: auto;
			}

			.modal.modal-opacity {
				opacity: 1;
			}

			.modal.modal-on {
				transition: 0s all ease 0.4s,
					0.4s opacity ease-in-out 0s;
			}

			.modal-content {
				background-color: #fff;
				box-shadow: 0 1px 4px rgba(0,0,0,0.5);
				box-sizing: border-box;
				color: #333;
				cursor: default;
				margin: 0 auto;
				max-width: 640px;
				max-height: calc(100vh - 24px);
				min-height: 250px;
				overflow-y: scroll;
				padding: 24px;
				position: absolute; top: 50%; left: 50%;
				transform: translate(-50%, -50%);
				width: calc(100% - 24px);
			}

			body.overflow-hidden {
				overflow: hidden;
			}

		</style>
	</head>

	<body>

		<button type="button" data-target="popup">Popup</button>
		<div class="modal" id="popup" data-target="popup">
			<div class="modal-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales quam nibh, quis euismod metus volutpat facilisis. Pellentesque bibendum elit id justo efficitur, eu molestie orci facilisis. Duis ac tortor in justo pellentesque elementum quis non ipsum. Sed tellus erat, luctus ac accumsan at, suscipit sed leo. Duis aliquet sem augue, ut ornare ipsum volutpat id. Aliquam mi velit, imperdiet ut sodales eu, aliquam at sapien. Etiam ornare gravida laoreet. Phasellus faucibus nulla vitae varius commodo. Duis aliquet placerat metus nec vulputate.</p>
				<p><button type="button" data-target="popup">Close</button></p>
			</div>
		</div>

		<script>

			document.addEventListener('click', (event) => {
				event.preventDefault();

				const target = event.target.getAttribute('data-target');

				if ( target ) {

					const modal = document.getElementById(target);

					modal.classList.toggle('modal-opacity');

					setTimeout( (modal) => {
						modal.classList.toggle('modal-on');
					}, 400, modal );

					document.body.classList.toggle('overflow-hidden');
				}
			});

		</script>

	</body>
</html>