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();

showModal() 메소드를 사용하여 표시되는

요소는 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>

팝오버와

의 주요 차이점 요소

팝오버와

의 주요 차이점 요소는 팝오버가 항상 비모달이라는 것입니다. <대화상자> 요소에는 role=dialog 속성이 함께 제공됩니다. 이 역할 속성은 다양한 HTML 요소에 연결되며 특정 방식으로 작동합니다. 즉, h1에는 제목 역할이 있고 앵커/링크 역할이 있습니다. 이 역할은 요소를 결정하기 위해 화면 판독기와 같은 보조 기술을 결정하고 지원하는 데 사용됩니다. 그러나 팝오버는 기본 역할이 첨부되어 있지 않으므로 HTML 요소에 대한 속성입니다. 이는

위의 예에서는 버튼을 클릭할 때까지 숨겨집니다.

팝오버 속성은 최소한의 코드로 사용할 수 있으며 Javascript를 사용하여 제어할 수 있지만

처럼 항상 필요한 것은 아닙니다.

팝오버에는 두 가지 특성이 있습니다.
1.popover=auto: 간단히 해제하는 기능이 있으며 JS 상호작용이 필요하지 않습니다.
2.popover=manual: 명시적으로 닫으려면 버튼이나 타이머를 클릭하는 등의 Javascript 상호작용이 필요합니다.

팝오버는 항상 최상위 레이어에 표시되며 Z-색인을 명시적으로 설정할 필요가 없습니다.

코드 예:

Javascript 코드가 거의 없이도 동일한 동작을 달성할 수 있다는 것을 알 수 있습니다. 다양한 팝오버를 디자인하고 관리하는 것이 훨씬 쉬워졌습니다.

일부 디자인 고려 사항

여기서 고려해야 할 주요 사항은 현재 표시되는 구성 요소에만 초점을 맞춰야 한다는 것입니다. 사용자가 다른 것과 상호작용하도록 허용할 수 있나요?

결론

결론적으로 요소와 팝오버 API는 웹 애플리케이션에서 대화형 팝업을 생성하기 위한 다양한 옵션을 제공합니다. 각각의 고유한 특성과 사용 사례를 이해하면 정보에 입각한 결정을 내려 사용자 경험을 향상하고 개발 프로세스를 간소화할 수 있습니다.

참고자료

Popover API와 요소 비교
대화상자와 팝오버는 비슷해 보입니다. 어떻게 다른가요?
Popover API가 Baseline에 도입되었습니다

위 내용은 Popver API VS 대화 상자 모달: 동일하지만 다름의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.