彈出窗(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筆記