[JavaScript] 부트스트랩 모달 에러 화면 어두워지고 제어 불능

채용 공고 등록 폼을 step1 에서 7까지 총 7개의 step으로 구성했고, 등록하기 버튼을 누르면 form이 제출된다.

 

입력값 유효성 검사를 위해 오전 작업 중 등록하기 버튼을 누르면 모달창이 나오는데

💥 모달창을 닫기 위해 '아니오'  버튼을 눌렀는데 화면이 어두워지고 제어가 먹통이 되는 상황 이 발생했다.

 

 

공고 등록 폼 제출 이외에도 여러 버튼을 모달로 처리하고 있는데 이런 현상은 처음이여서 당황했다

 

7개의 step을 그냥 합쳐야되나.. 라고 순간 생각도 했지만 개발 계획과 어긋나기에 해결 시작 ^__^

 

🧐 모달이 닫히고도 화면이 어두워지고 제어가 안되는 이유는?

1. 모달 제어를 위한 JS 코드에서 모달을 여러 번 실행해서 발생

2. 모달 닫힌 뒤 backdrop 이 꼬이는 현상 발생

 

 

💡 문제 해결 방법

1. 중복 모달 인스턴스 생성 방지

const modalEl = document.getElementById('deleteModal');
const deleteModal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);

 

2. 모달이 닫힐 때 강제로 backdrop 제거

modalEl.addEventListener('hidden.bs.modal', function () {
  document.body.classList.remove('modal-open');
  document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
});

 

🌟 핵심요약

모달을 닫았을 때 화면이 어두워지고 제어가 안 되는 현상은 보통 모달의 백드롭(배경)과 포커스 관리가 제대로 해제되지 않아서

발생되는 것!

 

따라서 모달이 중복되지 않게 인스턴스를 "1번만" 만드는 것이 핵심이다! 

 

그리고 부트스트랩 모달을 제어하려면 <script> 추가는 필수이다 😀

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

 

 

문제 해결 후 모달 닫기 정상 작동