[React] 라이브러리 없이 모달 구현하기

이대희·2021년 3월 28일
4
post-thumbnail

  • state객체의 productBasket에 값을 false를 준다(모달 off)

  • 버튼을 누를때마다 state객체의 productBasket에 값을 true, false로 바꿔 모달을 on, off한다.

  • 모달은 화면 전체를 덮고있으므로 width:100%, height:auto로 설정한다.
  • 스크롤에 따라 움직이면 안되기에 position:fixed를 준다.
  • 모달은 모든 ui보다 앞으로 나와야하므로 z-index를 준다.
  • 필요에 따라 뒷 배경이 보이게 하고싶므면 opacity값을 주어 투명도를 낮춘다.
profile
이대희
이전 포스트

동적라우팅을 사용하여 상품디테일 페이지 만들기

다음 포스트

[React]카카오 소셜로그인 API 기능 추가하기

1개의 댓글

comment-user-thumbnail
henry
2021년 3월 28일

이 글 보고 모달창 완성했어요 ~~ 🤞

답글 달기