Bootstrap v4에서 v5로 넘어가면서 가장 큰 변화는 자바스크립트의 변화입니다. v4에서는 jQuery가 베이스였지만, v5에서는 순수 자바스크립트(Vanilla Javascript)가 기본 베이스로 바뀌게 되었습니다. 그러면서, 기존에 동작제어 방식이 많이 변경되었습니다. 그 중에서 이 번 포스팅에서는 Modal창을 v5버전에서 순수 자바스크립트로 제어하는 방법에 대해서 알아 보겠습니다.
Bootstrap v5의 Modal 기본
다음은 v5의 Modal창의 기본 소스입니다.
버튼을 클릭하면 모달창이 보여지고, "X", "닫기" 혹은 "모달창 밖"을 클릭하면 모달창이 닫히는 기본 소스입니다.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<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">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<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">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>위와 같이 HTML 태그의 어트리뷰트(Attribute)에 값을 지정하여 제어 하는 방식이 기본입니다. (자바스크립트가 없음)
주요 속성(Attribute)는 다음과 같습니다.
- 모달창 열기(보이기): data-bs-toggle="modal" data-bs-target="#exampleModal"
- 모달창 닫기(숨기기): data-bs-dismiss="modal"
자바스크립트로 BS5 Modal창 열기/닫기
우선, 속성(Attribute)으로 제어를 하지 않고, 자바스크립트로 제어를 할 것이기 때문에, 위 소스에서 주요 속성(data-bs-toggle="modal" data-bs-target="#exampleModal", data-bs-dismiss="modal")을 제거하고, 자바스크립트 이벤트(click)를 적용할 버튼에 각 각 id를 부여합니다.("bs5OpenModal", "bs5CloseModalX", "bs5CloseModal")
속성을 제거한 HTML 소스는 아래와 같습니다.
<!-- Button trigger modal -->
<button id="bs5OpenModal" type="button" class="btn btn-primary">
Launch demo modal
</button>
<!-- Modal -->
<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">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button id="bs5CloseModalX" type="button" class="btn-close" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button id="bs5CloseModal" type="button" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
이제, 각 각의 버튼의 "click"이벤트에 modal의 메서드인 "show()", "hide()"메서드를 호출합니다.
v5에서는 Bootstrap Component의 정해진 메서드를 호출하기 위해서는 "new bootstrap.component(...)"로 객체를 생성 후 접근하도록 변경되었습니다.
따라서, 아래와 같이 객체 생성 후 각 버튼 이벤트에서 생성한 객체로 메서드를 호출하여 목적을 달성합니다.
자바스크립트 소스는 아래와 같습니다.
// 모달 객체 생성
const myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
// 모달창 열기: "Launch demo modal"버튼
document.getElementById('bs5OpenModal').addEventListener('click', () => {
myModal.show();
});
// 모달창 닫기: "X"버튼
document.getElementById('bs5CloseModalX').addEventListener('click', () => {
myModal.hide();
});
// 모달창 닫기: "Close"버튼
document.getElementById('bs5CloseModal').addEventListener('click', () => {
myModal.hide();
});
이상으로 BS5 모달창 자바스크립트로 열기/닫기에 대한 포스팅을 마칩니다.
행복하세요~
댓글