스크립트 모달 팝업 2개

<style>
	.modal {
		display: none;
		position: fixed;
		overflow: hidden;
	}

	.modal-content {
		background-color: #fff;
		padding: 20px;
		border: 1px solid #888;
		width: 30%;
		position: fixed;
		border-radius: 20px;
		box-shadow: 0 0 20px #00000061;
	}

	#modal1 {
		z-index: 10000002;
		top: 10%;
		left: 20%;
	}

	#modal2 {
		z-index: 10000003;
		top: 30%;
		left: 40%;
	}

	#overlay {
		display: none;
		position: fixed;
		z-index: 10000001;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal .modal-content figure {
		width: auto;
		height: auto;
		margin: 0;
	}

	.modal .modal-content figure a {
		display: block;
		height: 100%;
	}

	.modal .modal-content figure a:hover {
		opacity: .7;
	}

	.modal .modal-content figure img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.modal .btnArea {
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}

	.modal .btnArea button {
		display: block;
		margin: 0 5px;
		padding: 10px;
		border: 0;
		background: #189A4D;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		border: 0;
		border-radius: 10px;
		cursor: pointer;
	}

	.modal .btnArea button:hover {
		opacity: .7;
	}

	@media screen and (max-width: 820px) {
		#modal1 {
			left: 10%;
		}

		.modal-content {
			width: 50%;
		}

		.modal .modal-content figure {
			width: 100%;
			height: auto;
		}

		.modal .btnArea button {
			font-size: 1rem;
		}
	}

	@media screen and (max-width: 768px) {
		#modal2 {
			left: 28%;
		}

		.modal-content {
			border-radius: 10px;
		}
	}
</style>

<div id="modal1" class="modal">
	<div class="modal-content">
		<figure>
			<a href="/img/pop-230407.pdf" target="_blank"><img src="/img/pop-230407.png" alt="매치업 기초 교육"></a>
		</figure>
		<div class="btnArea">
			<button id="close-btn" class="close-btn">닫기</button>
			<button id="hideModal1" class="not-again-btn">다시 안보기</button>
		</div><!-- .btnArea -->
	</div>
</div>

<div id="modal2" class="modal">
	<div class="modal-content">
		<figure>
			<a href="http://www.kmooc.kr/" target="_blank"><img src="/img/pop-230607.png" alt="매치업 심화 교육"></a>
		</figure>
		<div class="btnArea">
			<button id="close-btn" class="close-btn">닫기</button>
			<button id="hideModal2" class="not-again-btn">다시 안보기</button>
		</div><!-- .btnArea -->
	</div>
</div>

<div id="overlay"></div>

<script>
	document.addEventListener("DOMContentLoaded", function() {
		const modal1 = document.getElementById("modal1");
		const modal2 = document.getElementById("modal2");
		const overlay = document.getElementById("overlay");

		const closeModal1 = document.querySelector("#modal1 .close-btn");
		const closeModal2 = document.querySelector("#modal2 .close-btn");
		const hideModal1 = document.getElementById("hideModal1");
		const hideModal2 = document.getElementById("hideModal2");

		let isDragging = false;
		let dragOffset = {
			x: 0,
			y: 0
		};

		function handleMouseDown(e) {
			isDragging = true;
			var modal = e.target.closest(".modal");
			var rect = modal.getBoundingClientRect();
			dragOffset.x = e.clientX - rect.left;
			dragOffset.y = e.clientY - rect.top;
		}

		function handleMouseMove(e) {
			if (isDragging) {
				var modal = e.target.closest(".modal");
				modal.style.left = e.clientX - dragOffset.x + "px";
				modal.style.top = e.clientY - dragOffset.y + "px";
			}
		}

		function handleMouseUp() {
			isDragging = false;
		}

		function closePopup1() {
			modal1.style.display = "none";
			if (modal2.style.display == "none") {
				overlay.style.display = "none";
                document.querySelector("body").style.overflow = "visible";
			};
		}

		function closePopup2() {
			modal2.style.display = "none";
			if (modal1.style.display == "none") {
				overlay.style.display = "none";
                document.querySelector("body").style.overflow = "visible";
			};
		}

		closeModal1.addEventListener("click", closePopup1);

		closeModal2.addEventListener("click", closePopup2);

		overlay.addEventListener("click", function() {
			closePopup1();
			closePopup2();
		});

		hideModal1.addEventListener("click", function() {
			localStorage.setItem("hideModal1", true);
			closePopup1();
		});

		hideModal2.addEventListener("click", function() {
			localStorage.setItem("hideModal2", true);
			closePopup2();
		});

		if (!localStorage.getItem("hideModal1")) {
			modal1.style.display = "block";
			overlay.style.display = "block";
        	document.querySelector("body").style.overflow = "hidden";
		}

		if (!localStorage.getItem("hideModal2")) {
			modal2.style.display = "block";
			overlay.style.display = "block";
        	document.querySelector("body").style.overflow = "hidden";
		}		
		
		modal1.addEventListener("mousedown", handleMouseDown);
		modal2.addEventListener("mousedown", handleMouseDown);
		document.addEventListener("mousemove", handleMouseMove);
		document.addEventListener("mouseup", handleMouseUp);
	});
</script>

 

 

다시 안보기 부분 -> 오늘 하루 안보기로 변경

 

// 하단에 오늘 하루 안보기 버튼 부분만 변경(변수명 확인 후 잘 바꾸기)

hideTodayButton.addEventListener("click", function() {
    const hideUntil = new Date();
    hideUntil.setDate(hideUntil.getDate() + 1); // Add one day to the current date
    localStorage.setItem("hideUntil", hideUntil.toISOString());
    closePopup1();
});

const hideUntilDate = localStorage.getItem("hideUntil");
if (!hideUntilDate || new Date() > new Date(hideUntilDate)) {
    modal1.style.display = "block";
    overlay.style.display = "block";
    document.querySelector("body").style.overflow = "hidden";
}