2021/10/10 : 항상 최상위에 노출되는 모달만들기

 

다라쓰 프로젝트는 웹 페이지 어디서나 삽입가능한 댓글 서비스이다.

그리고 댓글과 관련된 각종 얼럿문구들을 "화면이 꽉차는" 모달로 제공하고 있다.

 

어느날 버그 리포트를 받았다.

 

모달을 띄웠는데, 삽입된 웹 페이지의 요소가 다라쓰 모달보다 위쪽에 나타나고 있는 것이다.

 

다라쓰는 사용자가 자신의 블로그에 삽입하고 싶은 위치에

<div id="darass"> 를 삽입하면 그 태그 내부에

댓글영역과 모달을 렌더링하고 있었다.

 

그리고 모달은 거기서 position:fixed로 화면을 꽉차게하고 있었는데,

처음에는 z-index만 높이면 되겠다는 생각을 했다.

그런데 모달의 z-index를 많이 높였는데도 상황은 똑같았다.

 

원인을 찾고자 계속된 why질문을 던졌고, 레이어의 쌓임맥락에서 <div id="darass">가 외부 요소의 fixed상태를 이기지 못한다는 결론에 도달했다.

실제로 <div id="darass"> 외부에서 어떤 요소가 position:fixed이고 z-index까지 높은 경우에는 절대로 이길 수 없다.

 

그래서 아예, 모달을 담당하는 iframe을 body의 최하단에 삽입하여 !important와 z-index를 높게 준다(최대가 2147483647이었다.)면 가능할것이라는 가설을 세웠고, 실제로 원하는 대로 동작했다.

 

하지만 이 방식도 완전하지는 않은데, iframe안에 iframe인 상황이라면 body를 찾아도 iframe 내부의 body이기 때문에 전체화면을 가릴 수 있는 모달을 만들 수는 없다. (일반적이지 않은 상황이긴하다.)

 

어쨋든 이슈해결성공~

 

 

 

https://github.com/woowacourse-teams/2021-darass/pull/699

[FE][댓글모듈] 모달을 어떠한 사이트에서나 최상단에 위치할 수 있도록 한다. by zereight · Pull Reque