인프런 커뮤니티 질문&답변

loelee91님의 프로필 이미지
loelee91

작성한 질문수

반응형 웹사이트 포트폴리오(Architecture Agency)

모달 관련해서 질문합니다!

작성

·

251

1

선생님 페더라이트 이용해서 모달쓸때요, 서브페이지로 활용하기 위해서 위드값 하이트값을 100%로 해서 썼잖아요.

저는 레이아웃을 바꾸고 싶어서 보통 생각하는 모달창 크기정도로 위드값 하이트값을 조절해봤는데요.

그럴때 모달창에서 스크롤을 하면 바디도 같이 스크롤이 되는데, 그걸 막고싶어서 

 event.stopPropagation();
  event.preventDefault(); 이벤트들을 이용해봐도 잘 안되는데 혹시 방법 없을까요? ㅜㅜ

답변 7

1

네. 이번엔 해결을 못했네요.ㅠㅠ

참... 웹디자인 기능사 실기시험은 언제 보시나요?

1

loelee91님의 프로필 이미지
loelee91
질문자

앗 아니에요 쌤. 아무래도 브라우저에서 휠이나 스크롤 관련해서 막고있는것 같기도 해요 ㅜㅜ 저도 해보다가 궁금해서 알아봤는데 막는다면 막아지기도 하는데, 브라우저마다 잘 안되기도 하네요. 바쁘실텐데 답변주셔서 감사해요 참고해서 더 공부해볼겠습니다.

1

질문하신 내용을 이해하고 저도 같은 형태로 모달 크기를 줄여서 띄웠는데 모달 밖에서 스크롤할 때 body도 스크롤이 되네요.
그런데 이런 부분은 아래와 같이 해결합니다.

<script>
   $('.btn-hiring').click(function(){
         $('body').addClass('active')
   })
</script>

<style>
       body.active {
               overflow: hidden;
        }
</style>

모달 창의 닫기 버는에는 반대로 $('body').removeClass('active')를 주시면 원상태로 돌아옵니다.
일반적으로 스크롤 해서 보시는 웹사이트의 경우 위의 방법으로 하시면 됩니다.

그런데 마우스 휠 스크롤하는 플러그인 영향으로 body에 overflow: hidden 이 안되더라구요.
이번 경우에는 저도 여러가지 해봤는데 모달 밖에서 스크롤할 때 body도 스크롤되는 부분은 아직 해결방법을 모르겠네요.
죄송합니다.ㅠㅠ

0

그렇군요. 8월 8일 오프모임에 나오신 분들은 실기시험 당일 분위기,요령 등 알려드렸는데 그때 오셨으면 좋았을텐데 아쉽네요.  대신 영상에 최대한 설명할거니까 걱정마세요^^

0

loelee91님의 프로필 이미지
loelee91
질문자

아앗..감사합니다 ㅜㅜ 저 9월 8일에 본답니다~!

0

안녕하세요. loelee91 님~

이번 3회차 시험보시는군요. 

3회차 일정이 2020.08.29~2020.09.19 인데 언제 보시는지요?^^

실기시험에서 인터넷은 사용 못합니다. 하지만 블라켓 실시간 미리보기는 인터넷 안되도 관계없이 프로그램 자체 기능이니까 걱정하지 않으셔도 됩니다.

코딩한거 구현 잘 되는지 수험자와 같이 관리자랑 모두 확인해요.
그리고 실기시험장에서 절차와 요령은 제가 몇일 안에 영상으로 제작해서 올릴게요.
한다고 하면서 잊어 먹고 있었네요.ㅠㅠ

실기시험 분위기, 절차, 요령, 제출방법 등은 업로드된 영상 보시면 자세히 아실거에요.
곧 제작해서 올릴게요~

0

loelee91님의 프로필 이미지
loelee91
질문자

저 요번 3회 본답니다. 선생님 강의로 열심히 공부중이랍니다. 아참, 하나 여쭤보고 싶은게 있는데요. 

실기시험장이 어떻게 돌아가는지 잘 몰라서요 ㅜㅜ 궁금한점이 실기시험동안은 인터넷을 열어주지 않아서 실시간 미리보기가 안될텐데, 그러면 제가 코딩한걸 마지막으로 구현이 잘 되는지 확인은 불가능한건가요? 그냥 구현되는지 확인은 못하고 코딩만 해서 제출하는건지..아니면 시험 후반에라도 잠깐 인터넷을 열어주는건지 그게 궁금해요 쌤..

loelee91님의 프로필 이미지
loelee91

작성한 질문수

질문하기