`popover` 속성을 가진 요소는 `showPopover()`나 `popovertarget` 버튼으로 열 수 있습니다. 자동 팝오버는 바깥 클릭이나 Esc로 닫히며 최상위 레이어에 올라갑니다.
데모는 메뉴를 자동으로 열고 닫으며 버튼으로 직접 조작할 수도 있습니다. 중요한 확인이나 복잡한 대화에는 목적에 맞는 대화상자 동작을 선택해야 합니다.
언제 쓰나
도움말이나 간단한 액션 메뉴처럼 짧고 비모달인 표면에 사용합니다.
팝오버 API
Popover API
HTML 속성과 내장 동작으로 가벼운 팝오버를 열고 닫습니다.
···
<div class="v"><header>POPOVER <span id="popstate">open</span></header><div class="stage popstage"><button id="trigger" popovertarget="menu">Open menu</button><div id="menu" popover><div>Quick actions</div><div class="item">Edit item</div><div class="item">Share link</div></div></div><div class="muted">button → top layer → light dismiss</div></div>.v{width:min(94vw,760px);height:min(88vh,320px);padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 clamp(12px,2.4vmin,16px)/1.3 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden}.v header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--accent);font-weight:700}.v header span{color:var(--muted);font-weight:500}.v .stage{flex:1;min-height:0;position:relative}.v .muted{color:var(--muted)}.v .active{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:var(--accent)!important;color:var(--fg)}.v button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer}.popstage{display:grid;place-items:center}.popstage button{border-color:var(--accent);position:absolute;top:0;left:50%;transform:translateX(-50%)}#menu{position:fixed;inset:auto auto 18% 50%;transform:translateX(-50%);margin:0;min-width:130px;padding:8px;border:1px solid var(--accent);border-radius:8px;background:var(--surface);color:var(--fg);box-shadow:0 12px 26px #0003;font:inherit}#menu .item{margin-top:5px;padding:4px 6px;background:var(--bg);border-radius:4px}const menu=document.getElementById("menu"),label=document.getElementById("popstate");function tick(){if(menu.matches(":popover-open")){menu.hidePopover();label.textContent="closed"}else{menu.showPopover();label.textContent="open"}}tick();let timer=setInterval(tick,2800);document.getElementById("trigger").addEventListener("pointerdown",()=>clearInterval(timer))