일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- graphql
- 변수
- Background
- 스코프
- 네비게이션
- MongoDB
- JavaScript
- 레이아웃
- 면접
- 디자인
- 배포
- NATIVE
- Express
- AWS
- JS
- 후기
- Notification
- 네이티브
- navigation
- scope
- React
- 자바스크립트
- ubuntu
- EC2
- 카카오
- Python
- Push
- 리액트
- 알림
- github
- Today
- Total
어서와, 개발은 처음이지?
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을 작성합니다.
거두절미하고 코드를 보겠습니다.
스크롤이 유지되는 모습을 보여주기 위해 inner html로 하드코딩 한 부분이 끔찍하긴 하지만, 전체적인 동작을 보기엔 충분합니다.
위에 언급했듯이 modal의 겉면에 해당하는 부분을 fixed로 viewport를 꽉 채운 뒤, 이전 글에서 작성한 방법으로 가운데 정렬을 했습니다.
다만 modal 안의 내용이 viewport의 height를 넘어가면 윗 부분이 보이지 않기 때문에, max height를 지정한 뒤, overflow scroll을 통해 합리적으로 동작할 수 있도록 했습니다.
2. 마치며
크게 특이한 부분은 없기에 짧게 마무리 하도록 하겠습니다.
css만 참조하시어, modal의 구성이 동적으로 변할 수 있도록 하는 등의 구현은 입맛에 맞춰 작성하시면 되겠습니다.
'CSS' 카테고리의 다른 글
div 가운데 정렬(feat. position absolute) (3) | 2019.10.03 |
---|