전체 화면 모바일 모달. 얼마나 힘들 수 있습니까?

전체 화면 무한 캘린더 및 전체 화면 콤보 상자를 구현하는 데 필요한 기존 입력을 넘어 모바일 친화적인 양식을 구현해야 한다고 상상해 보십시오. "전체 화면"에 대해 이야기해 봅시다. 얼마나 어려울 것으로 예상하십니까? 어렵지 않아야 합니다. Z-색인 및 고정 위치와 함께 전체 화면 div를 사용하세요. 오른쪽? 내가 생각한 것.

시도 번호 1

Online example

모든 화면을 덮는 div를 사용하자

.FullScreenOne {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  background: #fff;
}

사용자가 Tab(또는 iOS의 ⌃ 및 ⌄)을 사용하여 커서를 모달 밖으로 이동할 수 있다는 점을 제외하면 작동합니다.

2번 시도

Online example

Reach Dialog 을 사용하십시오(이전 솔루션에 추가). Dialog는 현재 활성 대화 상자를 제외하고 aria-hidden 루트의 모든 노드에서 document.body를 설정합니다. 이렇게 하면 대화 상자 안에 가상 커서가 고정됩니다.

참고: 시도했지만 react-focus-lock iOS에서는 작동하지 않습니다(⌃ 및 ⌄).

사용자가 모달의 내용을 스크롤하려는 경우를 제외하고는 작동하지만 대신 모달 뒤의 내용을 스크롤합니다.

3번 시도

Online example

ScrollLocky 을 사용하십시오(이전 솔루션에 추가). ScrollLocky는 본문에서 react-locky 및 position: relative의 도움으로 페이지의 나머지 부분과의 모든 상호 작용을 차단합니다.

사용자가 아래로 스크롤하고 Mobile Safari get의 하단 크롬이 숨겨지는 경우를 제외하고는 작동하지만 나중에 하단 크롬의 모양을 트리거할 수 있으며 모달의 일부가 숨겨집니다.

시도 번호 4

Online example

mobile-safari-fullscreen 을 사용하십시오(이전 솔루션에 추가). 모달이 열릴 때 항상 브라우저 크롬 하단을 강제로 표시합니다.



참고: WindowSize를 대신 사용할 수 있습니다. mobile-safari-fullscreen . 이것이 선호되는 솔루션이라고 말하고 싶습니다. 이 데모는 얼마나 많은 엣지 케이스가 가능한지 보여주기 위한 것입니다.

<WindowSize>
  {({ height }) => (
    <ul style={{ height }}>
      <li />
    </ul>
  )}
</WindowSize>

결론

이러한 종류의 작은 세부 사항은 프론트엔드 개발을 어렵고 동시에 흥미롭게 만듭니다. 이 게시물이 마음에 드셨다면 my post about the UX of images on the web 을 읽으십시오.

추신 Different browser have the different behavior of focus . 가장 눈에 띄는 것은 링크와 버튼에 집중할 수 없는 Mobile Safari입니다¯\_(ツ)_/¯.

이 게시물의 전체 코드는 this GitHub repo을 확인하십시오.

나를 팔로우하고 github .