fullpage.js + bootstrap 모달팝업 배경 스크롤 문제
본문
안녕하세요
항상 많은 도움 주셔서 감사합니다.
제가 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의 스크롤이 동작하지 않게 하고 싶은거에요....모달팝업창 뒤에서 움직이니 당연히 이상해서 ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.