fullpage.js + bootstrap 모달팝업 배경 스크롤 문제

fullpage.js + bootstrap 모달팝업 배경 스크롤 문제

QA

fullpage.js + bootstrap 모달팝업 배경 스크롤 문제

답변 1

본문

안녕하세요

항상 많은 도움 주셔서 감사합니다.

 

제가 fullpage.js와 bootstrap을 함께 적용하여 홈페이지를 만들고 있는데요,

푸터의 '개인정보처리방침', '이용약관' 부분을 모달팝업으로 띄워 볼 수 있도록 하는 과정에서 문제가 생겼습니다.

 

모달팝업을 띄운 상태에서 배경이 스크롤 되는건 당연히 이상해보여 아래와 같이 스크립트를 넣었습니다.

 

각 버튼 클릭 > 배경 스크롤 동작 X

모달창 클릭 > 배경 스크롤 동작 O

 


//adding the actions to the buttons
$(document).on('click', '#turnOff', function() {
  $.fn.fullpage.setAllowScrolling(false);
  $.fn.fullpage.setKeyboardScrolling(false);
});
$(document).on('click', '#turnOff2', function() {
  $.fn.fullpage.setAllowScrolling(false);
  $.fn.fullpage.setKeyboardScrolling(false);
});
$(document).on('click', '.modal', function() {
  $.fn.fullpage.setAllowScrolling(true);
  $.fn.fullpage.setKeyboardScrolling(true);
});

 

문제는 모달팝업의 배경이 아닌 본문이 노출되는 부분(modal-content)을 눌렀을 때입니다.

해당 부분을 클릭했을 때는 당연히 창이 닫히지 않는데 그럼에도 불구하고 모달팝업에 속해 있는 부분이라 배경이 다시 스크롤이 됩니다.

modal-content  부분은 modal에 포함되어 있어서 따로 그 영역만 지정할 수도 없고 미치겠습니다 ㅠㅠ

 


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">개인정보 처리방침</h5>
        <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>
      </div>
    </div>
  </div>
</div>

 

도저히 안되겠다 싶어 질문 남깁니다.

도움 부탁드려요 ㅠㅠ

 

감사합니다.

이 질문에 댓글 쓰기 :

답변 1

#exampleModal 의 position 을 abosolute 혹은 fixed 로 지정해보세요.

이미 modal 클래스에 position : fixed 가 되어있구요,
제가 배경이라고 잘못 말씀 드린 것 같은데 모달팝업창이 열렸을 때는 fullpage.js의 스크롤이 동작하지 않게 하고 싶은거에요....모달팝업창 뒤에서 움직이니 당연히 이상해서 ㅠㅠ

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 26
© SIRSOFT
현재 페이지 제일 처음으로