[Bootstrap] 모달창이 열렸을 때 백그라운드 스크롤 금지하기

페이지 정보

루루아빠 3,008 1 1 2017.10.17 13:36

평점

  • 평점 : 0점 (0명 참여)

본문

모달창이 열렸을 때 백그라운드(메인 화면) 스크롤 금지하기
JQuery를 이용하여 스크롤 금지, 스크롤 사용을 만든다.

1. 스크롤 금지

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};
2. 스크롤 사용

$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};
3. 모달창을 위해 아래 스크립트를 이용한다.

$(".modal").on("hidden.bs.modal", function() {
    $("html").enableScroll();
}).on("shown.bs.modal", function() {
    $("html").disableScroll();
});
이윰테마를 위해 그누보드5/eyoom/theme/설치된 테마/layout/tail_bs.html을 열어 종합적인 스크립트를 추가한다.

<script type="text/javascript">
$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};
$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};
$(".modal").on("hidden.bs.modal", function() {
    $("html").enableScroll();
}).on("shown.bs.modal", function() {
    $("html").disableScroll();
});
</script>
추천인 1
  • 내사랑
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,292,171
레벨 96
경험치 1,392,748

Progress Bar 86%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글1

루루아빠님의 댓글

루루아빠 글쓴이 2017.10.17 13:46
css를 이용해 모달창이 열렸을 때 백그라운드 스크롤 금지하기


상기 스크립트는 모달창이 열릴 때 백그라운드(메인 화면)가 오른쪽으로 이동하는 증상이 있다.
Total 7471738 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 Eyoom Builder 1.3.7 패치 루루아빠 2017.11.21 2,650 0
제로  🏆 💾 [스킨만들기] setup.php 의 설명 루루아빠 2005.06.23 2,649 0
이윰  🏆 로그인 후에만 홈 들어가게 만들기 루루아빠 2015.04.28 2,644 0
제로  🏆 💾 [스킨만들기] list_head.php의 설명 루루아빠 2005.06.23 2,641 0
그누•영카트  🏆 그누보드 5.1.10 패치 루루아빠 2015.12.23 2,640 0
CSS  🏆 webkit-transform 스타일이 마우스 오버시 보이는 flickering 증상 해결하기 루루아빠 2016.05.26 2,640 0
JavaScript  🏆 gifplayer를 통해 동영상 재생시 오디오 문제 루루아빠 2016.08.06 2,639 0
그누•영카트  🏆 5.2.1 토큰패치로 댓글 달린 본인 댓글 수정 못하는 문제 루루아빠 2016.08.22 2,639 0
그누•영카트  🏆 그누보드 5.2.9.5 패치 루루아빠 2017.10.22 2,636 0
그누•영카트  🏆 그누보드 5.2.9.8.1 패치 루루아빠 2017.12.31 2,635 1
제로  🏆 글을 쓰다가 자동으로 로그아웃이 되었을때 내용을 보호하는 법 루루아빠 2005.06.16 2,630 0
이윰  🏆 Q&A 게시판 최신글추출시 '비밀글입니다.' 를 원글 제목으로 변경하기 루루아빠 2015.10.20 2,629 0
그누•영카트  🏆 전체목록보이기 체크시에도 이전글 이다음글 버튼 나타내기 루루아빠 2015.10.15 2,628 0
이윰  🏆 특정 게시판을 메인 홈으로 보여주기 루루아빠 2017.12.13 2,627 0
이윰  🏆 특정 페이지에 다른 헤더 적용하기 루루아빠 2017.10.16 2,626 0
이윰  댓글+3🏆 PHP 8.x 지원을 위한 암호화, 복호화 함수 shadow2fox 2021.02.16 2,620 3
그누•영카트  🏆 익스11에서 사운드클라우드와 Jwplayer가 올바르게 재생되지 않을 때 루루아빠 2016.02.02 2,620 0
그누•영카트  🏆 그누보드 5.2.8 패치 루루아빠 2017.06.14 2,620 0
이윰  🏆 Eyoom Builder 1.3.11 패치 루루아빠 2017.11.21 2,618 0
CSS  🏆 gifplayer 플레이시 gifplayer-wrapper 아래 모든 div가 아래로 밀리는 현상 해결하기 루루아빠 2016.02.16 2,617 0