[jQuery] Theia Sticky Sidebar 사용시 모달(modal)이 사이드바 아래로 내려가는 문제 해결하기

페이지 정보

루루아빠 3,494 2016.03.16 16:00

평점

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

본문

Theia Sticky Sidebar 사용시 사이드바(basic-bs-side)와 본문(basic-bs-main) 서로간의 높이에 따라 고정된 효과를 얻게 되는데 (마치 프레임구조처럼) 문제는 본문이 사이드바 보다 짧을 때 모달창을 띄우서 스크롤을 위 아래로 내려보면 사이드바 아래로 모달창이 가려지는 효과가 나타난다.

아래 소스를 적용해보자.

<script type="text/javascript">        // 사이드바 고정시 모달창이 사이드바 아래로 내려앉는 문제 해결하기
var checkeventcount = 1,prevTarget;
$('.modal').on('show.bs.modal', function (e) {
    if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
    {  
      prevTarget = e.target;
      checkeventcount++;
      e.preventDefault();
      $(e.target).appendTo('body').modal('show');
    }
    else if(e.target==prevTarget && checkeventcount==2)
    {
      checkeventcount--;
    }
 });
</script>
그누보드5/eyoom/theme/설치된 테마/layout/tail.bs.html 하단 스크립트 라인에 추가한다.
추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,294,273
레벨 97
경험치 1,397,313

Progress Bar 2%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 1211 페이지
제목 글쓴이 날짜 조회 추천
jQuery  댓글+1🏆 button으로 유튜브 재생 및 정지 제어하기 루루아빠 2016.12.14 9,645 0
jQuery  댓글+2🏆 jQuery를 이용한 링크 자동 클릭(auto click) 루루아빠 2015.06.26 8,353 0
jQuery  🏆 🚩 Theia Sticky Sidebar 사용시 모달(modal)이 사이드바 아래로 내려가는 문제 해결하기 루루아빠 2016.03.16 3,495 0
jQuery  댓글+2🏆 사이드바를 고정하기 위한 Theia Sticky Sidebar 소개 및 적용법 루루아빠 2016.02.10 3,468 0
jQuery  댓글+1🏆 게시글 본문 내에 첨부된 이미지가 엑박으로 뜨는 경우 특정 이미지로 대체하기 루루아빠 2016.05.21 3,131 0
jQuery  🏆 a href 속성 마우스 오버시 브라우저 하단 링크 주소 감추기 루루아빠 2017.08.29 2,747 0
jQuery  🏆 이미지 로딩 실패시 대체 이미지 보여주기 루루아빠 2017.07.18 2,538 1
jQuery  🏆 특정 부모 클래스 내부에 있지 않을 경우에만 적용하기 루루아빠 2017.02.06 2,268 0
jQuery  🏆 타겟 링크가 내 주소인지 외부 주소인지 확인하기 루루아빠 2018.05.22 1,972 0
jQuery  🏆 마우스 클릭 및 엔터를 일정 초 이상 유지하면 특정 url로 이동하기 shadow2fox 2018.07.11 1,912 0
jQuery  🏆 모바일 및 태블릿에서 스크롤이 아닌 경우에만 터치 제어하기 shadow2fox 2018.08.13 1,860 0
jQuery  🏆 클릭 함수가 더블 클릭시에만 작동된다면 shadow2fox 2018.12.11 1,780 0