Popover API: HTML로 기본 팝업 만들기 - JavaScript가 필요하지 않음

새로운 Popover API: JavaScript 없이도 손쉽게 팝오버

Popover API는 팝오버 생성을 단순화하여 JavaScript 라이브러리나 수동 코딩이 필요하지 않습니다. 주요 브라우저에서 지원되므로 구현이 매우 쉽습니다.

팝오버 API 이해

이 새로운 표준은 팝오버 표시, 열기, 닫기 처리 및 접근성 고려 사항을 자동으로 처리하는 프로세스를 간소화합니다. 개발자는 더 이상 이러한 상태를 독립적으로 관리할 필요가 없습니다.

팝오버 만들기

기본 구현

기본 팝오버를 만드는 방법은 다음과 같습니다.

1. 팝오버를 실행하는 버튼을 HTML에 만듭니다.
2. 버튼의 popover-target 속성을 ​​사용하여 공유 ID(예: popover)를 통해 요소에 연결하세요.
3. 팝오버로 사용하려는 HTML 요소에 동일한 ID를 사용하여 popover 속성을 ​​적용하세요.

그게 전부입니다! 버튼을 클릭하면 팝오버가 열리고 외부를 클릭하면 자동으로 닫힙니다(가벼운 해제). 이 토글 기능은 기본 동작입니다.

닫기 버튼 추가

팝오버 내 닫기 버튼을 추가할 수 있습니다. 이 버튼에 적절한 popover-target 속성을 ​​부여하고 hide 작업을 명시적으로 정의하세요. 약간의 CSS를 사용하면 모양이 향상됩니다.

팝오버 모드

팝오버는 기본적으로 "자동" 모드입니다:

1. 팝오버를 열면 열려 있는 다른 팝오버가 모두 닫힙니다.
2. 가벼운 해제가 활성화되었습니다.

"수동" 모드로 전환하면 다른 팝오버가 자동으로 닫히는 것을 방지하고 가벼운 해제를 비활성화할 수 있습니다. 팝오버의 열기 및 닫기를 명시적으로 관리해야 합니다.

팝오버 스타일링

배경화면 요소 사용

backdrop 요소는 특히 유용합니다. 팝오버가 열리면 페이지의 나머지 부분을 오버레이합니다.

[popover] {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    max-width: 300px;
}

/* ... other CSS ... */

이를 통해 팝오버에 주의를 집중시킬 수 있는 쉬운 배경 스타일링이 가능합니다.

팝오버 vs. 모달

팝오버는 모달이 아닙니다.

1. 팝오버는 페이지의 나머지 부분과의 상호 작용을 비활성화하지 않습니다.
2. 팝오버가 열려 있는 동안에도 다른 요소를 클릭할 수 있습니다.

진행하기 전에 사용자 상호작용이 필요한 모달의 경우 대신 dialog.showModal()을 사용하세요. 이를 위해서는 일부 JavaScript가 필요하지만 진정한 모달 기능을 제공합니다.

팝오버 스타일링 강화

대화 요소 사용

popover 속성 자체는 의미가 없으므로 팝오버에 HTML <dialog> 요소를 사용할 수 있습니다.

콘텐츠 추가 및 CSS 적용

더 많은 콘텐츠(버튼 등)와 ​​CSS로 스타일(글꼴 모음, 패딩, 색상 등)을 추가하면 팝오버의 모양이 더욱 향상됩니다. 이 예에서는 더욱 세련된 모양을 위해 기본 버튼의 스타일을 지정하는 방법을 보여줍니다.

팝오버와 함께 JavaScript 사용

API가 JavaScript 없이 팝오버 생성을 단순화하지만, JavaScript를 사용하여 더욱 고급 제어를 수행할 수 있습니다(예: showPopover).

결론

Popover API는 최소한의 코드로 우아하고 접근 가능한 팝오버를 만드는 간소화된 접근 방식을 제공합니다. 귀하의 의견을 환영합니다! 이와 같은 콘텐츠를 더 보려면 좋아요나 팔로우를 고려해 보세요.

팔로우: LinkedIn | 중간 | 블루스카이

위 내용은 Popover API: HTML로 기본 팝업 만들기 - JavaScript가 필요하지 않음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!