弹窗实现

popup
代码如下
html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>popup</title>
	</head>
	<body>
		<div class="btn">
			<button class="popup-btn">弹窗</button>
		</div>
		<div class="mask"></div>
		<div class="popup"></div>
	</body>
	<style>
		.btn {
			/* text-align: right; */
		}

		.mask {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			position: fixed;
			top: 0;
			left: 0;
			display: none;
		}

		.popup {
			width: 600px;
			height: 400px;
			border-radius: 10px;
			background-color: #ccc;
			position: fixed;
			left: 50%;
			top: 50%;
			z-index: 2;
			transform: scale(0) translate(-50%, -50%);
			transition: all 0.2s;
		}

		.popup-show {
			transform: scale(1) translate(-50%, -50%);
			transition: all 0.2s;
		}

		.mask-show {
			display: block;
		}
	</style>

	<script>
		const $ = (el) => document.querySelector(el);

		let btn = $('.popup-btn');
		let popup = $('.popup');
		let mask = $('.mask');

		popup.style.cssText = `transform-origin: ${
			btn.getBoundingClientRect().x - window.innerWidth / 2
		}px ${btn.getBoundingClientRect().y - window.innerHeight / 2}px`;

		console.log(btn.getBoundingClientRect());

		btn.addEventListener('click', (e) => {
			popup.style.cssText = `transform-origin: ${
				e.x - window.innerWidth / 2
			}px ${e.y - window.innerHeight / 2}px`;

			console.log(e.x, e.y, window.innerWidth, window.innerHeight);

			console.log(popup.style.cssText);

			popup.classList.add('popup-show');
			mask.classList.add('mask-show');
		});

		mask.addEventListener('click', () => {
			popup.classList.remove('popup-show');
			mask.classList.remove('mask-show');
		});
	</script>
</html>
弹窗实现 ​

弹窗实现
