Popver API VS 대화 상자 모달: 동일하지만 다름

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

TL;DR

<대화상자>를 선택하세요. 대상:

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

팝오버 선택:

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

<대화상자> 요소

MDN에 따르면 The Dialog 요소

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-index를 수동으로 관리해야 합니다.

놀랍게도 팝오버 API가 이러한 문제에 대한 답변을 제공하거나 수정했습니다....

팝오버 API

팝오버는 모든 HTML 속성에 추가할 수 있는 속성입니다. 예시는 다음과 같습니다.

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

팝오버와

의 주요 차이점 요소

팝오버와