Bootstrap modals overlapping scroll focus problem

   Bootstrap modals overlapping scroll focus problem

스크롤을 해야할 정도의 긴 모달창이 아래와 같이 2개 있다고 가정하고, 

모달1과 모달2를 순서대로 띄웠을때

모달2 는 정상적으로 스크롤링 되지만 

모달2를 닫고, 모달1을 스크롤하려고 하면..!

아래와 같이 body로 포커스가 이동되어 더이상 모달1을 스크롤하지 못하는 문제

   원인과 해결)

modal 을 활성화 하고 닫으면 닫으면 body에 modal-open 클래스추가되고 삭제된다.

modal2 를 닫을때 body에 modal-open 이 없을경우 body에 modal-open 클래스를

추가해주면 다시 스크롤의 포커스가 모달1로 인식한다

   code)

$("#modal_2").on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
        $('body').addClass('modal-open');
    }    
});

https://stackoverflow.com/questions/27371918/stacking-modals-scrolls-the-main-page-when-one-is-closed/27379904

   modal Event)

show.bs.modal : 인스턴스가 호출될때 즉시 발동

shown.bs.modal : 모달을 렌더링할때 발동

hide.bs.modal : 호출될때 즉시 발동

hiden.bs.modal : 숨겨질때 발동

loaded.bs.modal : 모달의 remote 옵션^[각주:1]을 사용하여 내용을 로드할때 시작된다

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Type	Description
show.bs.modal	This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal	This event is fired immediately when the hide instance method has been called.
hidden.bs.modal	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
loaded.bs.modal	This event is fired when the modal has loaded content using the remote option.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

1. https://getbootstrap.com/docs/3.3/javascript/#modals-options [본문으로]