javascript, Body 위에 Modal 상태를 만들기.

웹 개발할때, 모달 상태를 만들일이 꽤 있다. 그래서 당연히 라이브러리도 많이 존재한다.

왠만해서는 라이브러리를 가져다 쓰기는 하는데, 어쩌다가 직접 모달상태를 만들어야 할일이 생겼다.

모달상태가 되면, 'position:fixed' 인 창을 맨 위로 올리고, 아래있는 body 부분의 'overflow:hidden' 으로해서 스크롤을 못하게 막아버리면 된다. 

이때, 브라우저에 따라 '스크롤바'가 차지하고 있는 영역이 있을 수 있다. 사이즈도 브라우저마다 다를 수 있으므로, 그때그때 스크롤바의 넓이를 구해서, body의 'padding-right'를 설정해준다.

const body = document.getElementsByTagName('body')[0]

const scrollbarWidth = window.innerWidth - body.offsetWidth

console.warn('스크롤바의 넓이', scrollbarWidth)

body.style.overflow = 'hidden'

body.style.paddingRight = scrollbarWidth + 'px';

모달이 끝나면, 반대로 해제해 주면 된다.

const body = document.getElementsByTagName('body')[0]

body.style.overflow = ''

body.style.paddingRight = '';