popover
Baseline
2024
*
Newly available
Since â¨April 2024â©, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
popover å
¨å±å±æ§ç¨æ¥æå®ä¸ä¸ªå
ç´ ä¸ºå¼¹åºæ¡å
ç´ ï¼popover elementï¼ã
å¼¹åºæ¡å
ç´ éè¿ display: none 被éèï¼ç´å°éè¿è°ç¨/æ§å¶å
ç´ ï¼å³å¸¦æ popovertarget 屿§ç <button> æ <input type="button">ï¼æ HTMLElement.showPopover() è°ç¨æå¼ã
彿弿¶ï¼å¼¹åºæ¡å
ç´ å°åºç°å¨ææå
¶ä»å
ç´ ä¹ä¸ï¼å³å¨é¡¶å±ä¸ï¼å¹¶ä¸ä¸ä¼åå°ç¶å
ç´ ç position æ overflow æ ·å¼çå½±åã
popover 屿§å¯ä»¥æ "auto"ï¼é»è®¤ï¼æ "manual" çåå¼ãå
·æ auto ç¶æçå¼¹çªå¯ä»¥éè¿å¨å¼¹çªä¹å¤çåºåè¿è¡éæ©ï¼ä»¥è¾¾å°â轻触å
³éâçç®çï¼å¹¶ä¸é叏䏿¬¡ä»
å
许å±å¹ä¸æ¾ç¤ºä¸ä¸ªå¼¹çªãç¸æ¯ä¹ä¸ï¼manual å¼¹çªå¿
é¡»å§ç»æç¡®éèï¼ä½å¯ä»¥ç¨äºèåä¸åµå¥å¼¹çªçä½¿ç¨æ
åµã
æå ³æ´è¯¦ç»ç使ç¨ä¿¡æ¯ï¼è¯·åé Popover API 页é¢ã
示ä¾
ä¸è¿°ä»£ç å°åç°ä¸ä¸ªæé®ï¼å®å°æå¼ä¸ä¸ªå¼¹åºæ¡å ç´ ã
<button popovertarget="my-popover">æå¼å¼¹åºæ¡</button>
<div popover id="my-popover">åä½å¥½ï¼</div>
夿³¨ï¼è¯·åé æä»¬çå¼¹åºæ¡ API 示ä¾é¡µé¢ä»¥è®¿é®ææç MDN å¼¹åºæ¡ç¤ºä¾ã
è§è
| Specification |
|---|
| HTML > # the-popover-attribute > |
æµè§å¨å ¼å®¹æ§
åè§
- Popover API
popovertargetHTML 屿§popovertargetactionHTML 屿§::backdropCSS 伪å ç´:popover-openCSS 伪类