목록modal (1)

어서와, 개발은 처음이지?

반응형
Modal 만들기(body scroll lock)

이번 글에서는 modal을 만들어보도록 하겠습니다. 1. 모달(modal)을 만들자 알고 계시겠지만 모달은 일종의 팝업창으로 웹 서비스에서 뭔가 삭제 버튼을 눌렀을 때, 주변이 흐려지면서 정말 삭제하시겠습니까? 같은 ui를 말합니다. 구현 계획은 아래와 같습니다. 1. modal이 활성화 되었을 때, overflow: hidden 속성을 사용하여 스크롤이 되지 않도록 합니다.(position을 fixed 하라는 글이 종종 보이는데 이렇게 하면 화면 상단으로 스크롤이 이동하는 현상이 일어납니다.) 2. overlay 효과를 담당하는 div의 position을 fixed로 하여 viewport를 꽉 채웁니다. 3. modal의 가운데 정렬을 담당할 wrapModal을 만듭니다. 4. modal을 작성합니다...
CSS 2019. 10. 3. 18:41
반응형
Prev 1 Next