반응형
show.bs.modal과 shown.bs.modal은 Bootstrap 모달 이벤트이며, 각각 발생 시점이 다릅니다.
✅ 차이점 요약
이벤트명발생 시점설명
| show.bs.modal | 모달이 보여지기 전에 | 모달이 열리기 직전에 발생 |
| shown.bs.modal | 모달이 보여진 후에 | 모달이 화면에 완전히 표시된 후 발생 |
📌 실제 사용 예시
js
복사편집
// 1. 모달이 열리기 전에 실행 (아직 DOM에 표시되기 전)
document.addEventListener("show.bs.modal", function (e) { console.log("모달 열기 전"); });
// 2. 모달이 화면에 표시된 직후 실행 (애니메이션 끝난 뒤 등)
document.addEventListener("shown.bs.modal", function (e) { console.log("모달 완전히 열린 후"); });
🧠 언제 어떤 걸 써야 할까?
상황사용 이벤트
| 모달 열기 전에 데이터를 준비하거나 막고 싶을 때 | show.bs.modal |
| 모달이 실제로 화면에 떠 있는 상태에서 DOM 조작하거나 드래그 설정 등 | shown.bs.modal ✅ |
✅ 예: 드래그 적용 시엔 shown.bs.modal 추천
왜냐하면 show.bs.modal은 아직 DOM에 모달이 추가되기 전이라서 .modal-dialog 같은 요소가 null일 수 있습니다.
→ 따라서 .querySelector()가 실패합니다.
document.addEventListener("shown.bs.modal", function (e) {
const modal = e.target;
const dialog = modal.querySelector(".modal-dialog"); // ✅ 이제 잡힘 });
✅ 결론
- show.bs.modal: 열리기 직전
- shown.bs.modal: 열린 직후 (애니메이션 완료 후) → 실제 조작/드래그 등은 이걸 써야 함
반응형