팝업창

.popup {
display: none; /* 기본적으로 숨김 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}

.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 10px;
text-align: center;
width: 300px;
}

.close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
cursor: pointer;
}

document.addEventListener(“DOMContentLoaded”, function() {
var popup = document.getElementById(“popup”);
var closeBtn = document.querySelector(“.close-btn”);

// 일정 시간 후 자동으로 팝업 표시 (5초 후)
setTimeout(function() {
popup.style.display = “block”;
}, 5000);

// 닫기 버튼 클릭 시 팝업 닫기
closeBtn.addEventListener(“click”, function() {
popup.style.display = “none”;
});

// 팝업 바깥 영역 클릭 시 닫기
popup.addEventListener(“click”, function(event) {
if (event.target === popup) {
popup.style.display = “none”;
}
});
});