fullpage.js + bootstrap 모달팝업 배경 스크롤 문제 채택완료
안녕하세요
항상 많은 도움 주셔서 감사합니다.
제가 fullpage.js와 bootstrap을 함께 적용하여 홈페이지를 만들고 있는데요,
푸터의 '개인정보처리방침', '이용약관' 부분을 모달팝업으로 띄워 볼 수 있도록 하는 과정에서 문제가 생겼습니다.
모달팝업을 띄운 상태에서 배경이 스크롤 되는건 당연히 이상해보여 아래와 같이 스크립트를 넣었습니다.
각 버튼 클릭 > 배경 스크롤 동작 X
모달창 클릭 > 배경 스크롤 동작 O
Copy
//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에 포함되어 있어서 따로 그 영역만 지정할 수도 없고 미치겠습니다 ㅠㅠ
Copy
개인정보 처리방침
.....
Close
도저히 안되겠다 싶어 질문 남깁니다.
도움 부탁드려요 ㅠㅠ
감사합니다.
답변 1개
채택된 답변
+20 포인트
3년 전
#exampleModal 의 position 을 abosolute 혹은 fixed 로 지정해보세요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
Suprussy73
3년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
제가 배경이라고 잘못 말씀 드린 것 같은데 모달팝업창이 열렸을 때는 fullpage.js의 스크롤이 동작하지 않게 하고 싶은거에요....모달팝업창 뒤에서 움직이니 당연히 이상해서 ㅠㅠ