HTML popover 속성

정의와 사용법

popover 属性将元素定义为弹出元素，这意味着当元素被调用时，它将被放置在内容的顶部，不会干扰其他 HTML 요소的位置。

弹出元素在被另一个元素调用之前将是不可见的。另一个元素必须有一个 popovertarget 속성，其值引用弹出元素的 id。

弹出元素将被放置在所有其他内容的顶部，通过点击 popovertarget 요소，弹出元素可在显示和隐藏之间切换：

안녕하세요

弹出元素可以是像上面的例子中的单个 HTML 요소，也可以是像下面的例子中的一整套 HTML 요소。

다른 것을 참조하세요：

HTML 참조서:HTML Input popovertarget 속성

HTML 참조서:HTML Input popovertargetaction 속성

예제

예제 1

popover 속성을 가진 <h1> 요소와 그를 표시/숨기는 버튼을 추가하세요：

<h1 popover id="myheader">안녕하세요</h1>
<button popovertarget="myheader">누르세요!</button>

직접 테스트해 보세요

예제 2

div 요소를 팝업 요소로 사용하려면:

<div popover id="mydiv">
  <h2>Popover</h2>
  <hr>
  <p>팝업은 모든 다른 요소 위에 위치한 요소입니다.</p>
  <p>중요한 정보를 알리려면 사용할 수 있습니다.</p>
</div>

직접 테스트해 보세요

문법

<element popover>

속성 값

popover 속성은 부울 속성입니다. 설정되면, 해당 요소가 팝업 요소임을 지정합니다.

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
114 114 지원하지 않음 17 100