강의 대시보드 제이쿼리 반응형 애니메이션 모달(1)
제이쿼리 반응형 애니메이션 모달(1)
강의명 : HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
수강 기한 : 무제한
진도율 : 0강/120강 (0%) | 시간 : 0분/2318분
나가기
미수강
이전수업
다음수업

반응형 애니메이션 모달(HTML+CSS+JQUERY) 영상은 유튜브를 통해서 공부하세요.

완성본 및 실습 소스파일은 우측 상단의 수업 자료 버튼을 누르시면 다운로드 받을 수 있습니다.

CSS 속성을 변경해서 모달창이 나타날 때 다양하게 변경할 수 있습니다.

그리고 깔끔하고 쉬운 제이쿼리 코드로 모달창을 제어합니다.

[코드 추가]

.modal에 opacity: 0라서 눈에는 안보이지만 영역이 존재하기 때문에 텍스트영역에 마우스가 올라가서 커서가 변경되는 것입니다.

제가 완전하게 만들어야 하는데 코드가 빠졌네요. 아래 코드를 보시면 2가지 중 1가지를 선택하시면 커서가 생기는 문제가 해결됩니다.

첫째, visibility로 아예 대상을 감추고 보이는 것입니다.

둘째, pointer-events로 마우스 포인터 반응을 못하게하고 다시 하게 하고 입니다.

.modal {

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0.7);

  z-index: 10;

  opacity: 0;

  transition: .5s;

  /* pointer-events: none; */

  visibility: hidden;

}

.modal.active {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1);

  /* pointer-events: all; */

  visibility: visible;

}

    목차 커뮤니티