(문서를 비움) 태그: 비우기 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
^여기에문서가적혀있다고가정해보고^ | |||
<html lang="ko"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<title>공지 팝업<얘왤케이마빡이넓냐</title> | |||
<style> | |||
/* 팝업 배경 */ | |||
.popup-overlay { | |||
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: -100%; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
width: 90%; | |||
max-width: 400px; | |||
background: white; | |||
border-radius: 10px; | |||
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); | |||
padding: 20px; | |||
text-align: center; | |||
animation: slideDown 0.4s ease-out forwards; | |||
} | |||
/* 닫기 버튼 */ | |||
.close-btn { | |||
margin-top: 20px; | |||
background: #007BFF; | |||
color: white; | |||
border: none; | |||
padding: 10px 20px; | |||
cursor: pointer; | |||
border-radius: 5px; | |||
font-size: 16px; | |||
} | |||
.close-btn:hover { | |||
background: #007BFF; | |||
} | |||
/* 애니메이션 효과 */ | |||
@keyframes slideDown { | |||
from { | |||
top: -100%; | |||
} | |||
to { | |||
top: 20%; | |||
} | |||
} | |||
@keyframes slideUp { | |||
from { | |||
top: 20%; | |||
} | |||
to { | |||
top: -100%; | |||
} | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<!-- 팝업 --> | |||
<div class="popup-overlay" id="popup"> | |||
<div class="popup-content" id="popup-content"> | |||
<h2>📢 제목</h2> | |||
<p>여기에내용을적어라</p> | |||
<button class="close-btn" onclick="closePopup()">닫기</button> | |||
</div> | |||
</div> | |||
<script> | |||
// 페이지 로드 시 팝업 표시 | |||
document.addEventListener("DOMContentLoaded", function () { | |||
const popup = document.getElementById("popup"); | |||
popup.style.display = "block"; // 팝업 표시 | |||
}); | |||
// 팝업 닫기 | |||
function closePopup() { | |||
const popupContent = document.getElementById("popup-content"); | |||
popupContent.style.animation = "slideUp 0.4s ease-out forwards"; // 닫기 애니메이션 | |||
popupContent.addEventListener("animationend", function () { | |||
const popup = document.getElementById("popup"); | |||
popup.style.display = "none"; // 팝업 숨김 | |||
}, { once: true }); | |||
} | |||
</script> | |||
</body> | |||
</html> | |||
2024년 12월 9일 (월) 23:53 판
^여기에문서가적혀있다고가정해보고^