Project/Synamon

createPortal로 모달을 띄웠을 때의 이슈와 해결 방법.

Hyunsoo_Kim 2024. 3. 17. 10:47

Trouble



1. createPortal로 모달을 띄웠을 때, 백 드롭을 포함한 요소가 현재 레이아웃과 맞지 않아 가로스크롤이 생김

 

Solution



 

1. body 태그에 relative 속성을 설정한 후,

 

 

2. 띄울 모달을 absolute로 설정하고, createPortal의 목적지를 document.body로 하였다.

 

 

3. 이슈였던 가로 스크롤이 사라졌다. 이 방법은 body가 최소한 브라우저 화면 전체를 커버하고 있어야 가능하다. 주의해야 할 점은, 모달을 띄울 요소의 크기를 screen이 아니라 full로 해야한다는 것. screen은 현재 보이는 브라우저만큼의 크기만을 가지기 때문에 <body>가 현재 보이는 화면보다 더 넓은 크기를 가지고 있을 때 백 드롭이 <body>태그 전체를 덮지 못한다.

 

 

4. createPortal로 전달시킬 요소는 프래그먼트 태그 안에 백 드롭<div>와 콘텐츠<div>를 형제 요소로 만든 상태였고, 둘 다 absolute 포지셔닝이 되었기 때문에 <body>가 브라우저 전체를 커버하지 않으면 이런 현상이 발생한다. 따라서 <body>가 화면 전체를 감싸고 있지 않은 페이지는 dialog로 만들어야 한다.