부트스트랩(Bootstrap) 모달 띄우기

부트스트랩으로 만들어진 템플릿에서 modal을 띄우기 위해 아래처럼 style.display = "block"을  사용했다.

document.getElementById('event-modal').style.display = "block";

 

근데 안나오는거...;; 왜지...

 

 

 

확인해보니 부트스트랩의 modal은 기존 HTML/CSS 모달과는 다르게 Javascript로 동작하기 때문에 사용 방법이 다르다.

HTML의 display: block; 속성만으로는 제대로 표시되지 않는 이유도 부트스트랩 modal이 내부적으로 추가적인 조작을 하기 때문.

var eventModal = new bootstrap.Modal(document.getElementById("event-modal"));
eventModal.show();

이렇게 사용해야함!

 

✅ 부트스트랩 모달의 주요 차이점

부트스트랩 modal 부분을 보면 아래와 같이 class 가 설정되어있다.

<div class="modal fade" id="event-modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        ...

 

1) 애니메이션 효과 (fade 클래스) 

부트스트랩 모달은 기본적으로 fade 클래스를 사용하여 부드러운 애니메이션 효과가 적용됨. 

 

2) 배경 비활성화 (.modal-backdrop)

모달이 열릴 때 자동으로 <div class="modal-backdrop"> 요소가 생성됨.

이를 통해 배경 클릭 시 닫히는 기능을 제공함.

배경 비활성화 (.modal-backdrop) - 뒤에 흐려짐

 

3) 키보드 ESC 키 닫기 기능

esc 키를 누르면 모달이 닫히도록 기본 설정되어 있음.

keyboard: false 옵션을 사용하면 ESC 키로 닫히는 기능을 비활성화할 수 있음.

 

4) ARIA 접근성 지원
role="dialog"와 aria-labelledby="modal-title" 등의 속성이 자동으로 추가되어 접근성이 향상됨.

 

5) JavaScript API 제공
.show(), .hide(), .toggle() 등의 메서드를 제공하여 동적으로 모달을 조작할 수 있음.

 

<button class="btn btn-primary w-100" id="btn-new-event">Create New Event</button>

 

근데 사실 JavaScript 방식 (onclick 사용) 을 안해도 된다.

 

부트스트랩에서는 data-bs-toggle="modal"과 data-bs-target="#모달ID"를 버튼에 추가하면 자동으로 모달을 띄울 수 있음!

<button class="btn btn-primary w-100" id="btn-new-event" data-bs-toggle="modal" data-bs-target="#event-modal">Create New Event</button>

 

비슷하게 모달 안에 있는 닫힘버튼도 data-bs-dismiss="modal" 설정해서 사용 가능.

 aria-hidden="true"  는 접근성 API 차단 (가상 커서로 탐색 x)

<button type="button" class="btn-close" data-bs-dismiss="modal"aria-hidden="true"></button>

 

 

 

✅ 부트스트랩 모달에 항목 저장해서 리스트에 추가하기

열고 닫는건 했으니 저장처리 해주고 모달을 닫아주면 된다.

저장버튼이 기존에 <button type="submit"> 이었는데 submit은 폼을 제출하면서 페이지를 새로고침하니까 type:"button"으로 변경해줌.