JavaScript
[JavaScript] HTML/CSS/JS 간단한 팝업창 만들기
Potato Ongsim
2023. 7. 26. 23:01
반응형
HTML
<!DOCTYPE html>
<html>
<head>
<title>팝업창 예제</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="openButton">팝업 열기</button>
<div class="popup-container" id="popupContainer">
<div class="popup-content">
<!-- 팝업창 내용 -->
<h1>팝업창 내용</h1>
<p>팝업창 내용을 입력하세요.</p>
<button id="closeButton">닫기</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>HTML 파일에는 팝업창을 나타내기 위한 요소와 팝업창을 표시할 버튼을 만들며 일반적으로는 팝업창을 감싸는 컨테이너 요소와 팝업창 내용을 담는 요소를 포함한다.
CSS
.popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
align-items: center;
justify-content: center;
}
.popup-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
}
#openButton {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
#closeButton {
margin-top: 10px;
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}CSS 파일에는 팝업창과 버튼 등의 스타일을 정의하며 팝업창을 숨겨놓고 버튼 클릭시 팝업창이 나타나도록 스타일을 설정한다.
JavaScript
const openButton = document.getElementById("openButton");
const closeButton = document.getElementById("closeButton");
const popupContainer = document.getElementById("popupContainer");
openButton.addEventListener("click", () => {
popupContainer.style.display = "flex";
});
closeButton.addEventListener("click", () => {
popupContainer.style.display = "none";
});JavaScript 파일에는 팝업창을 열고 닫는 동작을 구현한다. 버튼을 클릭하면 팝업창을 나타내거나 숨기는 이벤트를 추가한다.
HTML의 " id = openButton " 을 가지고와 " click " 시 popupContainer의 style.display를 " flex " 로 변경하여
팝업창을 연다.
HTML의 " id = closeButton " 을 가지고와 " click " 시 popupContainer의 style.display를 " none" 으로 변경하여
팝업창을 닫는다.
반응형