Bootstrap 5의 모달은 사용자와의 상호작용을 위한 강력한 도구입니다. 이번 글에서는 모달을 열고 데이터를 전달하며 버튼 클릭 후 처리하는 과정을 초보자도 쉽게 이해할 수 있도록 단계별로 설명하겠습니다.
1. 모달 구성하기
모달은 HTML 구조와 Bootstrap의 기본 클래스를 사용해 손쉽게 구현할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal Example</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- 버튼 -->
<button type="button" class="btn btn-primary" id="openModal" data-bs-toggle="modal" data-bs-target="#exampleModal">
모달 열기
</button>
</div>
<!-- 모달 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">모달 제목</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
이곳에 데이터가 표시됩니다.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
<button type="button" class="btn btn-primary" id="processData">후처리 실행</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom Script -->
<script src="script.js"></script>
</body>
</html>위 HTML 코드에서는 모달을 생성하고 이를 열 수 있는 버튼을 구현했습니다. data-bs-toggle과 data-bs-target 속성을 사용해 모달을 연결합니다.
2. 데이터 전달 및 후처리 구현하기
JavaScript를 활용해 모달에 데이터를 전달하고 버튼 클릭 후 처리를 실행합니다.
// 모달 열기 버튼 클릭 시 데이터 설정
document.getElementById('openModal').addEventListener('click', function () {
const modal = document.getElementById('exampleModal');
modal.dataset.key = 'exampleKey';
modal.dataset.value = 'exampleValue';
// 데이터 확인 (콘솔 출력)
console.log('모달 데이터 설정 완료:', modal.dataset);
});
// 후처리 버튼 클릭 시 동작
document.getElementById('processData').addEventListener('click', function () {
const modal = document.getElementById('exampleModal');
const dataKey = modal.dataset.key;
const dataValue = modal.dataset.value;
// 후처리 실행
alert(`데이터 키: ${dataKey}, 데이터 값: ${dataValue}`);
});- 모달 열기:
- #openModal 버튼 클릭 시 dataset 속성을 이용해 데이터를 모달에 설정합니다.
- 설정된 데이터는 콘솔에 출력됩니다.
- 데이터 후처리:
- #processData 버튼 클릭 시 dataset에 저장된 데이터를 가져와 alert로 표시합니다.
- 후처리 로직을 이곳에 추가하면 됩니다.
3. 최종 동작 확인
- "모달 열기" 버튼을 클릭하면 모달이 열리고 데이터가 설정됩니다.
- 모달에서 "후처리 실행" 버튼을 클릭하면 설정된 데이터를 활용한 후처리가 실행됩니다.
결론
이처럼 Bootstrap 5 모달과 JavaScript를 활용하면 데이터를 동적으로 전달하고 처리하는 기능을 손쉽게 구현할 수 있습니다. 초보자도 이해하기 쉽도록 HTML, JavaScript를 단계별로 나눠 설명드렸으니, 직접 따라 해 보시길 추천드립니다!
'Programming > 기본 (Baisc)' 카테고리의 다른 글
| [NMAP][UDP] Nmap UDP 포트 스캔과 통신 불가능 대상 분석하기 (0) | 2025.01.12 |
|---|---|
| 서버로 데이터 전송하기 (jQuery를 사용한 AJAX 방식) (0) | 2025.01.07 |
| [Rocky][Rocky9] Rocky Linux 9 네트워크 활성화 (0) | 2025.01.02 |
| [MariaDB][Mysql] RDBMS MariaDB Client SSL Ignore Skip 처리 (0) | 2025.01.02 |
| [Apache][Httpd][웹서버] Apache HTTP Server Systemd Unit File 작성 및 적용하기 (0) | 2024.12.29 |
