JS組件Bootstrap實現(xiàn)彈出框效果代碼
為頁面內(nèi)容添加一個小的覆蓋層，就像iPad上的效果一樣，為頁面元素增加額外的信息。
插件依賴
彈出框依賴工具提示插件，因此需要先加載工具提示插件。
選擇性加入的功能
出于性能方面的考慮，工具提示和彈框組件的data屬性api是選擇性加入的，也就是說你必須自己初始化他們。
彈出框在按鈕組和輸入框組中使用時，需要額外的設(shè)置
當提示框與.btn-group 或 .input-group聯(lián)合使用時，你需要指定container: 'body'選項（見下面的文檔）以避免不需要的副作用（例如，當彈出框顯示之后，與其合作的頁面元素可能變得更寬或是去圓角）。
在禁止使用的頁面元素上使用彈出框時需要額外增加一個元素將其包裹起來
為了給disabled 或.disabled元素添加彈出框時，將需要增加彈出框的頁面元素包裹在一個<div>中，然后對這個<div>元素應用彈出框。
一、靜態(tài)案例
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;
}
<h1 class="page-header">3、彈出框</h1> <div class="bs-example bs-example-popover"> <div class="popover top"> <div class="arrow"></div> <h3 class="popover-title">Popover top</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div class="popover right"> <div class="arrow"></div> <h3 class="popover-title">Popover right</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div class="popover bottom"> <div class="arrow"></div> <h3 class="popover-title">Popover bottom</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div class="popover left"> <div class="arrow"></div> <h3 class="popover-title">Popover left</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> </div>
預覽效果
代碼段：
<a href="javascript:void(0)" id="a_pop" class="btn btn-danger" data-placement="bottom" data-content=" 風吹雨成花 時間追不上白馬 你年少掌心的夢話 依然緊握著嗎 云翻涌成夏 眼淚被歲月蒸發(fā) 這條路上的你我她 有誰迷路了嗎 我們說好不分離 要一直一直在一起 就算與時間為敵 就算與全世界背離 風吹亮雪花 吹白我們的頭發(fā) 當初說一起闖天下 你們還記得嗎 那一年盛夏 心愿許的無限大 我們手拉手也成舟 劃過悲傷河流 你曾說過不分離 要一直一直在一起 現(xiàn)在我想問問你 是否只是童言無忌 天真歲月不忍欺 青春荒唐我不負你 大雪求你別抹去 我們在一起的痕跡 大雪也無法抹去 我們給彼此的印記 今夕何夕 青草離離 明月夜送君千里 等來年 秋風起" data-original-title="時間煮雨" >點擊加載</a>
<strong>js初始化：</strong>
<script type="text/javascript">
$("#a_pop").popover();
</script>
預覽效果：
注意，當指定了placement時候，特別注意方向問題。因為彈出框是以觸發(fā)事件元素中心開始彈出，很可能被覆蓋而無法全部顯示出來。
代碼中a標簽href屬性必須指定為javascript:void(0)去除鏈接效果。
四個方位：
代碼
<a href="javascript:void(0)" id="a_pop1" class="btn btn-danger" data-placement="left" data-content=
"
風吹雨成花 時間追不上白馬
你年少掌心的夢話 依然緊握著嗎
云翻涌成夏 眼淚被歲月蒸發(fā)
這條路上的你我她 有誰迷路了嗎
"
data-original-title="時間煮雨"
>左側(cè)</a>
<a href="javascript:void(0)" id="a_pop2" class="btn btn-danger" data-placement="top" data-content=
"
我們說好不分離 要一直一直在一起
就算與時間為敵 就算與全世界背離
風吹亮雪花 吹白我們的頭發(fā)
當初說一起闖天下 你們還記得嗎
" data-original-title="時間煮雨">
上部
</a>
<a href="javascript:void(0)" id="a_pop3" class="btn btn-danger" data-placement="bottom" data-content=
"
那一年盛夏 心愿許的無限大
我們手拉手也成舟 劃過悲傷河流
你曾說過不分離 要一直一直在一起
現(xiàn)在我想問問你 是否只是童言無忌
" data-original-title="時間煮雨">
下部
</a>
<a href="javascript:void(0)" id="a_pop4" class="btn btn-danger" data-placement="right" data-content=
"
天真歲月不忍欺 青春荒唐我不負你
大雪求你別抹去 我們在一起的痕跡
大雪也無法抹去 我們給彼此的印記
今夕何夕 青草離離
明月夜送君千里 等來年 秋風起
" data-original-title="時間煮雨">
右側(cè)
</a>
</div>
<script type="text/javascript">
$("#a_pop1").popover();
$("#a_pop2").popover();
$("#a_pop3").popover();
$("#a_pop4").popover();
</script>
預覽效果；
二、選項
可以將選項通過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')
四、事件
$('#myPopover').on('hidden.bs.popover',
function
() {
//
do something…})
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家學習掌握Bootstrap彈出框有所幫助。
相關(guān)文章
本文主要介紹了JS模擬百度搜索框和選項卡的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
這篇文章主要介紹了Javascript Promise用法詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
基于RequireJS和JQuery的模塊化編程日常問題解析
本文是小編日常收集整理些有關(guān)RequireJS和JQuery的模塊化編程，感興趣的朋友一起學習吧2016-04-04
這篇文章主要介紹了在weex中愉快的使用scss的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要是對js菜單點擊顯示或隱藏效果的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)
這篇文章主要介紹了JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能防止刷新倒計時失效問題，在項目開發(fā)中經(jīng)常會用到此功能，下面小編通過本文給大家分享JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)，需要的朋友參考下吧2017-07-07
原生JS實現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼
這篇文章主要介紹了原生JS實現(xiàn)仿淘寶網(wǎng)左側(cè)商品分類菜單效果代碼,可實現(xiàn)簡單的鼠標滑過tab切換的功能,非常簡單實用,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JS截取字符串的方法,結(jié)合實例形式較為詳細的分析了JavaScript截取字符串的常用函數(shù)與具體使用技巧,并附帶說明了JS截取字符串substr和substring方法的區(qū)別,需要的朋友可以參考下2015-11-11
JavaScript中sharedWorker 實現(xiàn)多頁面通信的實例詳解
這篇文章主要介紹了JavaScript中sharedWorker 實現(xiàn)多頁面通信,通過給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04