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

페이지 정보

루루아빠 3,034 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,295,225
레벨 97
경험치 1,399,242

Progress Bar 9%

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

댓글1

루루아빠님의 댓글

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


상기 스크립트는 모달창이 열릴 때 백그라운드(메인 화면)가 오른쪽으로 이동하는 증상이 있다.
Total 7481738 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 글 작성시 익명으로만 글 작성하게 하기 루루아빠 2016.03.29 2,813 0
이윰  🏆 Eyoom Builder 1.2.3 패치 루루아빠 2016.03.29 2,914 0
이윰  🏆 Eyoom Builder 1.2.4 패치 루루아빠 2016.04.23 2,491 0
그누•영카트  🏆 그누보드 5.1.16 패치 루루아빠 2016.04.23 2,487 0
그누•영카트  🏆 영카트 5.1.16 패치 루루아빠 2016.04.23 2,503 0
JavaScript  🏆 모달창(Modal Window) backdrop(모달창 바깥 부분) 클릭시 모달창 닫지 않기 루루아빠 2016.05.06 3,430 0
이윰  🏆 본문 내용 추출시 특정 태그 제거하기 루루아빠 2016.05.09 2,529 0
이윰  댓글+1🏆 SELF-HOSTED로 Jwplayer7.x 사용시 외부 링크(jwpcdn.com)에서 스킨 가져오는 문제 루루아빠 2016.05.11 3,901 0
이윰  🏆 게시글 본문에 태그가 포함된 경우 검색시 그대로 노출되는 문제 해결 루루아빠 2016.05.13 2,315 0
이윰  🏆 📸 여분필드를 활용한 간단한 게시판 입력 서식 만들기 루루아빠 2016.05.13 3,127 0
이윰  🏆 모달(modal) 슬라이드 다운 슬라이드 업 효과 없애기 루루아빠 2016.05.13 3,254 0
이윰  🏆 이윰레벨을 사용치 않고 그누레벨만 사용하기 루루아빠 2016.05.17 2,594 0
그누•영카트  🏆 그누보드 5.1.17 패치 루루아빠 2016.05.17 2,852 0
그누•영카트  🏆 영카트 5.1.17 패치 루루아빠 2016.05.17 3,360 0
그누•영카트  🏆 그누보드 5.1.18 패치 루루아빠 2016.05.17 2,425 0
그누•영카트  🏆 영카트 5.1.18 패치 루루아빠 2016.05.17 2,669 0
에디터  🏆 CKeditor4.x 이미지 첨부시 에디터에 맞게 반응형으로 만들기 루루아빠 2016.05.21 4,101 0
jQuery  댓글+1🏆 게시글 본문 내에 첨부된 이미지가 엑박으로 뜨는 경우 특정 이미지로 대체하기 루루아빠 2016.05.21 3,134 0
기타  댓글+1🏆 Jwplayer 7.X 타이머 팁의 플레이 타임이 세로로 나타날 때 해결책 루루아빠 2016.05.21 2,703 0
에디터  댓글+1🏆 CKeditor4.x 에디터 툴바 고정하기 루루아빠 2016.05.24 3,597 0