JavaScript를 사용하여 버튼 클릭 이벤트에 대한 닫기 동작을 만들려면 다음 단계를 따를 수 있습니다. 이 예제에서는 HTML, CSS 및 JavaScript를 사용하여 모달 창(팝업 창)을 열고 닫는 기능을 구현하는 방법을 설명합니다.
1. HTML 작성:
먼저 HTML에서 모달 창과 관련된 요소를 만듭니다. 예를 들어 다음과 같이 HTML을 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 모달 버튼 -->
<button id="openModalBtn">모달 열기</button>
<!-- 모달 창 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" id="closeModalBtn">×</span>
<p>모달 내용을 입력하세요.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS 작성:
모달 창을 스타일링하기 위한 CSS를 작성합니다. 아래는 예제 스타일입니다. `styles.css` 파일에 저장하세요.
/* 모달 창 스타일 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
background-color: #fff;
margin: 20% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
position: relative;
}
/* 모달 닫기 버튼 스타일 */
.close {
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
}
3. JavaScript 작성:
JavaScript를 사용하여 모달을 열고 닫는 기능을 구현합니다. `script.js` 파일에 저장하세요.
// 모달 열기 버튼과 모달 창 요소 가져오기
const openModalBtn = document.getElementById('openModalBtn');
const modal = document.getElementById('myModal');
const closeModalBtn = document.getElementById('closeModalBtn');
// 모달 열기 버튼 클릭 시 이벤트 처리
openModalBtn.addEventListener('click', () => {
modal.style.display = 'block';
});
// 모달 닫기 버튼 클릭 시 이벤트 처리
closeModalBtn.addEventListener('click', () => {
modal.style.display = 'none';
});
// 모달 바깥 영역 클릭 시 모달 닫기
window.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
}
});
이제 버튼을 클릭하면 모달이 열리고, 모달 내부의 닫기 버튼을 클릭하거나 모달 외부를 클릭하면 모달이 닫히는 기능이 구현되었습니다. 이 예제를 참고하여 원하는 방식으로 모달 창을 열고 닫을 수 있습니다.
'게으른 개발자의 끄적거림' 카테고리의 다른 글
| $(document).ready 여러개 사용 (0) | 2023.09.26 |
|---|---|
| 어필리에이트 신청 방법(쿠팡, 알리익스프레스 등등) (0) | 2023.09.25 |
| window.location 기능 (host, ip, hash...) (0) | 2023.09.20 |
| IP로 도메인 확인하는 방법 (0) | 2023.09.19 |
| JSP sendRedirect vs forward 차이점 (0) | 2023.09.18 |