[JS] 모달창 이슈 해결하기

웹페이지에서 모달창을 사용하는데 있어 문제점들을 해결하고 이 내용을 다시 정리해보았다.

1.  모달창 활성화시 바디 스크롤 방지

모달창에서 마우스 휠을 사용하면 바디 스크롤이 같이 움직이는 경우가 있었다. 웹페이지 모달창에 사용한 carousel이 작동하기 어려워서 모달창이 열렸을 때만 바디 스크롤이 없어지도록 했다. 

여러 가지 방법이 있지만 가장 간단한 방법은 바디 스크롤이 적용된 구간 <div>의 상위 태그를 모달창 활성화시 overflow:hidden 처리하는 것으로 해결했다. css는 .addClass()로 적용했다. 

2.  모달창 비활성화시 바디 스크롤 (1의 반대)

반대로 모달창이 비활성화 되었을 때는 바디 스크롤이 작동해야 하므로 1번에서 addClass() 한 것을 다시 반대로 해제하기 위해 .removeClass()로 처리했다. 아래 코드에서 보는 것과 같이 모달창의 [ X ] 버튼 클릭시와 모달창 외부 영역을 선택했을 때 둘 다 적용될 수 있도록 했다. 

+  특정 영역 선택시 이벤트가 발생하도록 하는 방법

모달창 외의 특정 영역을 선택했을 때는 어떻게 알 수 있을까?

먼저, .mouseup()으로 전체 document에서 마우스를 눌렀다 뗄 때 발생하는 이벤트를 발생시키고, 그 이후에 modal 창이 아닌 곳을 선택했는지를 파악해야 한다. jquery API 중 .has()를 이용해서 마우스를 눌렀다 뗀 target의 modal이 있는지를 확인한다. 확인했을 때, length 값이 0 이면 모달창 밖의 영역을 누른 것으로 볼 수 있다.

 

 

    // 모달창 활성화시 body 스크롤 방지
    $(".modalOpen").click(function(){
      $("html").addClass('scroll');
    });
 
    // 모달창 비활성화시 body 스크롤
    $(".out").click(function(){
      $("html").removeClass('scroll');
    });
    $(document).mouseup(function (e){
      let modal = $(".modal");
      if(modal.has(e.target).length === 0){
        $("html").removeClass('scroll');
      }
    });