일부 기술 뉴스 블로그를 읽고 있던 중 Popover API가 Baseline에 있다는 제목을 우연히 발견했습니다. 최근 프론트엔드 개발에 뛰어들면서 HTML에서 Elements를 사용하는 데 익숙해지는 데 매우 어려움을 겪어 혼란스러웠습니다. 블로그를 둘러보면서 나는 지금까지 요소를 어떻게 사용했는지 끊임없이 혼란스러웠습니다.

TL;DR

다음에 대한 선택:

• 사용자 집중이 필요한 모달 팝업
• 접근성 및 키보드 상호 작용

팝오버 선택:

• 간단히 닫히는 비모달 팝업
• 최소한의 코드로 쉽게 구현

요소

MDN에 따르면 대화 상자 요소

HTML 요소는 모달 또는 비모달 대화 상자나 닫을 수 있는 경고, 검사기 또는 하위 창과 같은 기타 대화형 구성 요소를 나타냅니다.

A는 일반적으로 웹사이트에서 사용자의 관심을 중요한 내용으로 끌어야 할 때 콘텐츠 위에 표시됩니다. 예: 뉴스레터 구독, 광고 차단기 비활성화 요청(강제와 유사) 또는 이용 약관 동의.

요소를 모달로 사용

여러 웹사이트에서 여러 번 접했을 수 있으므로 이러한 팝업 중 일부는 배경을 흐리게 하거나 배경을 비활성화하고 사용자가 현재 작업에만 집중하는 동안 전체 화면에 그려집니다. 사용자는 두 가지 중 하나를 닫아야 합니다. (허용된 경우에만) 팝업을 표시하거나 필수 정보를 입력하면 팝업이 사라집니다. 이러한 동작을 '모달로서의 요소'라고 합니다. 이러한 모달 요소는 페이지의 최상위 레이어에 표시됩니다.

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

요소는 esc 키를 사용하여 닫을 수 있습니다. 키보드 사용자는 유지 관리가 필요하고 브라우저에서 제공되는 이러한 동작을 기대합니다. 여러 모달 대화 상자가 열려 있는 경우 Esc 키를 사용하면 마지막 대화 상자만 닫힙니다.

비모달 요소

항상 사용자의 웹페이지 사용의 자연스러운 흐름을 중단하고 다른 모든 작업을 중단하고 표시하고 싶은 내용에만 집중하고 싶지는 않지만 토스트 알림, 쿠키 동의 또는 일반 도구 설명과 같은 콘텐츠는 계속 표시할 수 있습니다. 정보. 페이지의 최상위 레이어, 사용자가 상호작용할 수 있거나 상호작용할 수 없는 다른 콘텐츠 위에 표시되어야 합니다. 이러한 유형의 팝업을 넌모달 팝업이라고 합니다. 사용자는 이를 수동으로 해제하거나 일반적으로 시간이 지나면 자동으로 사라질 수 있습니다. 이러한 비모달 대화 상자는 여전히 페이지의 최상위 레이어에 표시되지만 해당 우선순위는 z-색인을 사용하여 제어할 수 있으며 모달 요소는 이보다 더 높은 z-색인을 사용하므로 이에 액세스할 수 없게 됩니다.

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

코드 예

일부 문제

비모달 요소의 작동 및 사용법을 파악하는 데 어려움을 겪었습니다. 나에 따르면 비모달 요소는 일관되지 않게 동작했으며 다음과 같은 상황을 처리하기 위해 Javascript 코드가 필요했습니다.

간단한 해제 기능은 없습니다. 모델 외부를 클릭하면 .
• 가 닫히지 않습니다.
esc 키는 를 닫지 않으며 해당 시나리오를 처리하려면 Javascript가 필요합니다.
최상위 레이어를 그리려면 Z-색인을 수동으로 관리해야 합니다.

Toggle the popover
Popover content