popover 속성과 popovertarget으로 light dismiss, Esc 닫힘, 최상위 레이어
한 줄 요약 - 버튼에 popovertarget만 달면 JS 없이 팝오버가 열리고, 바깥 클릭이나 Esc로 닫힙니다.
메뉴/툴팁/간단 다이얼로그를 z-index 싸움 없이 다른 요소 위에 띄우고 싶을 때.
popover="auto"는 바깥 클릭/Esc로 자동 닫힘, "manual"은 버튼으로만 닫힘.
popovertargetaction="hide"로 닫기 버튼을 만든다.
팝오버는 항상 top-layer에 렌더된다.
열고 닫기/포커스/레이어를 브라우저가 처리합니다. 위치까지 정밀히 원하면 CSS Anchor Positioning과 조합하세요.
구버전 브라우저 폴백.
기본 위치는 화면 가운데(정밀 위치는 앵커 필요).
드롭다운 메뉴/알림/미니 다이얼로그
import type { Metadata } from "next";
import { NativePopoverDemo } from "./-components/NativePopoverDemo";
export const metadata: Metadata = {
title: "Native Popover API (데모)",
description:
"JavaScript 없이 HTML popover 속성만으로 열고 닫는 팝오버. 바깥 클릭/Esc 자동 닫힘(light dismiss)과 top-layer 렌더링을 보여줍니다.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<NativePopoverDemo />
</main>
);
}