body scroll lock/unlock

모달 창 띄웠을 때 바닥 페이지 스크롤 안되게 해주세요.

프로젝트를 하다 보면 위와 같은 요청을 받게 된다.
레이어로 모달 창을 띄운 상태에서 스크롤을 하면 바닥 페이지가 위 아래로 움직이게 되는데
이걸 막아 달라는거다.

CSS 프레임워크나 모달 플러그인 등을 사용하면
자체적인 기능으로 body 스크롤을 막아주기도 하지만
모달 기능을 직접 만들어서 사용하는 경우에는 따로 body scroll lock/unlock 기능을 만들어줘야 한다.

아래 예제의 스크립트를 사용하여

🔒body 스크롤을 막을 때는

$.lockBody();

를 호출하고

🔓body 스크롤을 풀 때는

$.unlockBody();

를 호출 해주면 된다.

👍example

위 예제는 'modal open' 버튼을 클릭하면
popOpen(id) 함수를 통해 해당 id를 가진 모달 창을 오픈 하면서 body scroll을 막고
모달 창에서 'close' 버튼을 클릭하여 모달 창을 닫으면
다시 body scroll을 풀어주는 간단한 예제이다.

비단 모달 창 뿐만 아니라
body 스크롤을 막고 풀고 컨트롤 해야 하는 경우에 유용하게 쓸 수 있다.