| site_link1 | https://getbootstrap.com/docs/5.0/compon...etinstance |
|---|---|
| site_link2 | https://stackoverflow.com/questions/6917...javascript |
| site_link3 |
sitelink1 의 문서를 찾지 못했을땐 스크립트로 모달을 닫는 방법을 찾지 못하고 있었다.
그저 <button type="button" class="btn btn-secondary" id="imd_btn_cancel" data-bs-dismiss="modal">close</button> 버튼으로만 닫고 있었는데
닫기 이외의 별다른 액션을 수행하지 못해서 매우 답답한 상황이었다.
문서에 따르면 다음과 같이 스크립트로 모달을 제어할 수 있다.
DOM 으로 "myModal" id를 부여하여 정의한 modal 객체는 다음의 코드로 취할 수 있다.
var myModal = bootstrap.Modal.getOrCreateInstance(document.querySelector('#myModal'));
or
var myModal = bootstrap.Modal.getInstance(document.getElementById('myModal'));
그렇게 취득한 인스턴스에는 hide() 메서드가 있다.
myModal.hide(); 만 호출하면 모달이 닫힌다.
그리고 만일 화면이 로드하자마자 myModal.show(); 하여 모달을 출력하고 싶은 경우
bootstrap.Modal.getInstance() 로 modal 의 인스턴스를 취하면 모달이 출력될거라고 예상하겠지만
화면 로딩후 최초에는 myModal 이 초기화되지 않아서 modal 인스턴스가 없다.
그래서 스크립트 오류가 발생하기 때문에 항상 bootstrap.Modal.getOrCreateInstance() 메서드를 이용하여 인스턴스를 취해 show(), hide() 하는 것이 좋다.
