JS組件Bootstrap實現彈出框效果代碼_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 21:49:36

JS組件Bootstrap實現彈出框效果代碼_javascript技巧

JS組件Bootstrap實現彈出框效果代碼_javascript技巧:為頁面內容添加一個小的覆蓋層，就像iPad上的效果一樣，為頁面元素增加額外的信息。插件依賴彈出框依賴工具提示插件，因此需要先加載工具提示插件。選擇性加入的功能出于性能方面的考慮，工具提示和彈框組件的data屬性api是選擇性加入的，也就是說你必須

推薦度：

點擊下載本文 文檔為doc格式

導讀JS組件Bootstrap實現彈出框效果代碼_javascript技巧:為頁面內容添加一個小的覆蓋層，就像iPad上的效果一樣，為頁面元素增加額外的信息。插件依賴彈出框依賴工具提示插件，因此需要先加載工具提示插件。選擇性加入的功能出于性能方面的考慮，工具提示和彈框組件的data屬性api是選擇性加入的，也就是說你必須

為頁面內容添加一個小的覆蓋層，就像iPad上的效果一樣，為頁面元素增加額外的信息。

插件依賴
彈出框依賴工具提示插件，因此需要先加載工具提示插件。
選擇性加入的功能
出于性能方面的考慮，工具提示和彈框組件的data屬性api是選擇性加入的，也就是說你必須自己初始化他們。
彈出框在按鈕組和輸入框組中使用時，需要額外的設置
當提示框與.btn-group 或 .input-group聯合使用時，你需要指定container: 'body'選項（見下面的文檔）以避免不需要的副作用（例如，當彈出框顯示之后，與其合作的頁面元素可能變得更寬或是去圓角）。
在禁止使用的頁面元素上使用彈出框時需要額外增加一個元素將其包裹起來
為了給disabled 或.disabled元素添加彈出框時，將需要增加彈出框的頁面元素包裹在一個中，然后對這個元素應用彈出框。
一、靜態案例
4個可選選項：top、right、bottom,和left排列。

代碼段

.bs-example 
 { 
 border-color:#ddd; 
 border-radius:4px 4px 0 0; 
 border-width:1px; 
 box-shadow:none; 
 margin-left:0; 
 margin-right:0; 
 border-style:solid; 
 } 
 .bs-example-popover .popover { 
 position: relative; 
 display: block; 
 float: left; 
 width: 240px; 
 margin: 20px; 
}

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

預覽效果

代碼段：

點擊加載

js初始化：

預覽效果：

注意，當指定了placement時候，特別注意方向問題。因為彈出框是以觸發事件元素中心開始彈出，很可能被覆蓋而無法全部顯示出來。

代碼中a標簽href屬性必須指定為javascript:void(0)去除鏈接效果。

四個方位：

代碼



二、選項

可以將選項通過data屬性或JavaScript傳遞。對于data屬性，需要將選項名稱放到data-之后，例如data-animation=""。





為單個彈出框應用data屬性

對單個彈出框可以通過data屬性單獨指定選項，如上所示。


三、方法

$().popover(options)
為一組元素初始化彈出框。
.popover('show')
顯示彈出框。
$('#element').popover('show')

.popover('hide')
隱藏彈出框。
$('#element').popover('hide')

.popover('toggle')
展示或隱藏彈出框。
$('#element').popover('toggle')

.popover('destroy')
隱藏并銷毀彈出框。
$('#element').popover('destroy')


四、事件




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com