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

페이지 정보

yadolee 루루아빠 3,431 1 1 2017.10.17 13:36:11

평점

  • 평점 : 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
  • 012i1052u
    내사랑
yadolee
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,334,534
레벨 100
경험치 1,492,365

Progress Bar 24.55%

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

댓글1

루루아빠님의 댓글

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


상기 스크립트는 모달창이 열릴 때 백그라운드(메인 화면)가 오른쪽으로 이동하는 증상이 있다.

Total 7621226 페이지

제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 영카트 5.2.9.8.4 패치 루루아빠 2018.03.30 2,699 0
그누•영카트  🏆 그누보드 5.1.18 패치 루루아빠 2016.05.17 2,700 0
그누•영카트  🏆 영카트 5.2.9.7 패치 루루아빠 2017.12.16 2,701 0
그누•영카트  🏆 영카트 5.1.16 패치 루루아빠 2016.04.23 2,703 0
그누•영카트  🏆 그누보드 5.3.1.3 패치 루루아빠 2018.05.29 2,704 0
그누•영카트  🏆 🎞️ 영카트 5.1.6 패치 루루아빠 2015.11.17 2,710 0
그누•영카트  🏆 그누보드 5.2.9.3 패치 루루아빠 2017.09.14 2,717 0
제로  댓글+1🏆 서버OS가 WindowsNT일경우 가입폼에서 메일체크 에러방지 루루아빠 2005.07.07 2,719 0
제로  🏆 태그 사용 체크 후 "취소" 하면 자동으로 체크 해제 루루아빠 2005.07.05 2,720 0
이윰  🏆 Eyoom Builder 1.3.15 패치 루루아빠 2018.01.05 2,723 0
그누•영카트  댓글+1🏆 영카트 5.1.5 패치 루루아빠 2015.11.09 2,724 0
이윰  🏆 Eyoom Builder 3.0.6 패치 shadow2fox 2018.09.18 2,725 0
이윰  🏆 🎞️ Input 관련 버튼과 이윰 버튼 정렬 맞추기 루루아빠 2015.11.17 2,731 0
이윰  🏆 이윰빌더 외부이미지 로컬 저장시 용량 줄이기 루루아빠 2017.11.23 2,731 0
서버  🏆 Nginx에서 HTTP → HTTPS 301 리다이렉트(Redirect) 하기 루루아빠 2017.12.11 2,732 0
제로  🏆 💾 [스킨만들기] list_head.php의 설명 2 루루아빠 2005.06.23 2,733 0
이윰  댓글+1🏆 관리자는 쪽지 보낼 때 캡챠코드 적용하지 않기 shadow2fox 2019.01.10 2,742 1
그누•영카트  🏆 그누보드 5.1.5 패치 (2015.11.02) 루루아빠 2015.11.09 2,744 0
그누•영카트  🏆 영카트 5.1.14 패치 루루아빠 2016.03.08 2,744 0
그누•영카트  🏆 💾 다음 스마트 워크를 이용해 소유 도메인으로 메일 서비스 이용하기 루루아빠 2017.03.27 2,744 1
이윰  🏆 Eyoom Builder 1.3.13 패치 루루아빠 2017.11.21 2,744 0
이윰  🏆 Eyoom Builder 3.0.9 패치 shadow2fox 2019.03.25 2,747 0
제로  🏆 💾 [스킨만들기] view_foot.php(이전 다음글, 버튼 표시 부분)의 설명입니다 루루아빠 2005.06.23 2,748 0
이윰  🏆 특정 게시판에 다른 헤더 파일 불러오기 루루아빠 2016.10.01 2,748 0
이윰  🏆 반응형 테마 PC에서 메인과 사이드 레이아웃 위치 변경하기 루루아빠 2016.11.22 2,749 0
이윰  🏆 블로그 스킨(blog skin) 갤러리 목록에서 box 이미지 높이 줄이기 루루아빠 2016.02.17 2,756 0
그누•영카트  🏆 그누보드 5.1.13 패치 루루아빠 2016.02.24 2,764 0
제로  🏆 💾 등록실패 방지 (글 등록 실패로 인한 글날림 방지) 루루아빠 2005.07.05 2,775 0
그누•영카트  🏆 영카트 5.2.9.8.3 패치 루루아빠 2018.03.22 2,776 0
그누•영카트  🏆 그누보드 5.1.19 패치 루루아빠 2016.07.06 2,777 0