彈出窗(POP) - bootStrap4常用CSS筆記
阿新 • • 發佈：2019-05-14
toggle boot document 不支持 code func 筆記 tle ref
彈出框控件類似於提示框，它在鼠標點擊到元素後顯示，與提示框不同的是它可以顯示更多的內容。
核心屬性：
| data-toggle = "popover" | 定義觸發此元素會執行彈出窗 |
| title = "彈窗標題" | 彈出窗的標題，不支持html格式。可以不包含此屬性 |
| data-content = "彈窗內容" | 彈出窗的內容，不支持html格式。建議包含此屬性 |
| data-placement = "{left | top | right | bottom}" | 彈出窗拉於執行元素的位置 |
| data-trigger= "{ focus | hover |
不設置此屬性時，通過點擊執行元素顯示或關閉彈出窗 data-trigger = "focus" 時，點擊頁面其它處時，關閉彈出窗 data-trigger = "hover" 時，鼠標移到執行元素時顯示彈出窗，移開時關閉彈出窗 |
HTML代碼：
1 <a href="#" title="這是<i>標</i>題" data-toggle="popover" data-trigger="focus" data-content="這是<strong>內容</strong>" data-placement="left">點我左側彈出，點擊空白處關閉彈窗</a>
JS代碼開啟效果：
1 $(document).ready(function(){ 2 $(‘[data-toggle="popover"]‘).popover(); 3 });
彈出窗(POP) - bootStrap4常用CSS筆記