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

Modal 만들기(body scroll lock) 본문

CSS

Modal 만들기(body scroll lock)

오지고지리고알파고포켓몬고 2019. 10. 3. 18:41
반응형

이번 글에서는 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
Comments