JS組件Bootstrap實(shí)現(xiàn)彈出框效果代碼
為頁(yè)面內(nèi)容添加一個(gè)小的覆蓋層,就像iPad上的效果一樣,為頁(yè)面元素增加額外的信息。
插件依賴
彈出框依賴工具提示插件,因此需要先加載工具提示插件。
選擇性加入的功能
出于性能方面的考慮,工具提示和彈框組件的data屬性api是選擇性加入的,也就是說(shuō)你必須自己初始化他們。
彈出框在按鈕組和輸入框組中使用時(shí),需要額外的設(shè)置
當(dāng)提示框與.btn-group 或 .input-group聯(lián)合使用時(shí),你需要指定container: 'body'選項(xiàng)(見(jiàn)下面的文檔)以避免不需要的副作用(例如,當(dāng)彈出框顯示之后,與其合作的頁(yè)面元素可能變得更寬或是去圓角)。
在禁止使用的頁(yè)面元素上使用彈出框時(shí)需要額外增加一個(gè)元素將其包裹起來(lái)
為了給disabled 或.disabled元素添加彈出框時(shí),將需要增加彈出框的頁(yè)面元素包裹在一個(gè)<div>中,然后對(duì)這個(gè)<div>元素應(yīng)用彈出框。
一、靜態(tài)案例
4個(gè)可選選項(xiàng):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>
預(yù)覽效果
代碼段:
<a href="javascript:void(0)" id="a_pop" class="btn btn-danger" data-placement="bottom" data-content=" 風(fēng)吹雨成花 時(shí)間追不上白馬 你年少掌心的夢(mèng)話 依然緊握著嗎 云翻涌成夏 眼淚被歲月蒸發(fā) 這條路上的你我她 有誰(shuí)迷路了嗎 我們說(shuō)好不分離 要一直一直在一起 就算與時(shí)間為敵 就算與全世界背離 風(fēng)吹亮雪花 吹白我們的頭發(fā) 當(dāng)初說(shuō)一起闖天下 你們還記得嗎 那一年盛夏 心愿許的無(wú)限大 我們手拉手也成舟 劃過(guò)悲傷河流 你曾說(shuō)過(guò)不分離 要一直一直在一起 現(xiàn)在我想問(wèn)問(wèn)你 是否只是童言無(wú)忌 天真歲月不忍欺 青春荒唐我不負(fù)你 大雪求你別抹去 我們?cè)谝黄鸬暮圹E 大雪也無(wú)法抹去 我們給彼此的印記 今夕何夕 青草離離 明月夜送君千里 等來(lái)年 秋風(fēng)起" data-original-title="時(shí)間煮雨" >點(diǎn)擊加載</a>
<strong>js初始化:</strong> <script type="text/javascript"> $("#a_pop").popover(); </script>
預(yù)覽效果:
注意,當(dāng)指定了placement時(shí)候,特別注意方向問(wèn)題。因?yàn)閺棾隹蚴且杂|發(fā)事件元素中心開(kāi)始彈出,很可能被覆蓋而無(wú)法全部顯示出來(lái)。
代碼中a標(biāo)簽href屬性必須指定為javascript:void(0)去除鏈接效果。
四個(gè)方位:
代碼
<a href="javascript:void(0)" id="a_pop1" class="btn btn-danger" data-placement="left" data-content= " 風(fēng)吹雨成花 時(shí)間追不上白馬 你年少掌心的夢(mèng)話 依然緊握著嗎 云翻涌成夏 眼淚被歲月蒸發(fā) 這條路上的你我她 有誰(shuí)迷路了嗎 " data-original-title="時(shí)間煮雨" >左側(cè)</a> <a href="javascript:void(0)" id="a_pop2" class="btn btn-danger" data-placement="top" data-content= " 我們說(shuō)好不分離 要一直一直在一起 就算與時(shí)間為敵 就算與全世界背離 風(fēng)吹亮雪花 吹白我們的頭發(fā) 當(dāng)初說(shuō)一起闖天下 你們還記得嗎 " data-original-title="時(shí)間煮雨"> 上部 </a> <a href="javascript:void(0)" id="a_pop3" class="btn btn-danger" data-placement="bottom" data-content= " 那一年盛夏 心愿許的無(wú)限大 我們手拉手也成舟 劃過(guò)悲傷河流 你曾說(shuō)過(guò)不分離 要一直一直在一起 現(xiàn)在我想問(wèn)問(wèn)你 是否只是童言無(wú)忌 " data-original-title="時(shí)間煮雨"> 下部 </a> <a href="javascript:void(0)" id="a_pop4" class="btn btn-danger" data-placement="right" data-content= " 天真歲月不忍欺 青春荒唐我不負(fù)你 大雪求你別抹去 我們?cè)谝黄鸬暮圹E 大雪也無(wú)法抹去 我們給彼此的印記 今夕何夕 青草離離 明月夜送君千里 等來(lái)年 秋風(fēng)起 " data-original-title="時(shí)間煮雨"> 右側(cè) </a> </div> <script type="text/javascript"> $("#a_pop1").popover(); $("#a_pop2").popover(); $("#a_pop3").popover(); $("#a_pop4").popover(); </script>
預(yù)覽效果;
二、選項(xiàng)
可以將選項(xiàng)通過(guò)data屬性或JavaScript傳遞。對(duì)于data屬性,需要將選項(xiàng)名稱放到data-之后,例如data-animation=""。
為單個(gè)彈出框應(yīng)用data屬性
對(duì)單個(gè)彈出框可以通過(guò)data屬性單獨(dú)指定選項(xiàng),如上所示。
三、方法
$().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…})
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)掌握Bootstrap彈出框有所幫助。
- Bootstrap實(shí)現(xiàn)帶動(dòng)畫過(guò)渡的彈出框
- Bootstrap彈出框(modal)垂直居中的問(wèn)題及解決方案詳解
- 簡(jiǎn)介BootStrap model彈出框的使用
- Bootstrap每天必學(xué)之彈出框(Popover)插件
- BootStrap的select2既可以查詢又可以輸入的實(shí)現(xiàn)代碼
- JS組件Bootstrap Select2使用方法解析
- 基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【三】下拉列表Select2插件的使用
- JS組件Bootstrap Select2使用方法詳解
- BootStrap下的彈出框加載select2框架失敗的解決方法
相關(guān)文章
JS雙向鏈表實(shí)現(xiàn)與使用方法示例(增加一個(gè)previous屬性實(shí)現(xiàn))
這篇文章主要介紹了JS雙向鏈表實(shí)現(xiàn)與使用方法,在之前鏈表的基礎(chǔ)上增加一個(gè)previous屬性實(shí)現(xiàn)的雙向鏈表功能,需要的朋友可以參考下2019-01-01前端面向?qū)ο缶幊讨瓻S5語(yǔ)法ES6語(yǔ)法詳解
這篇文章主要為大家介紹了前端面向?qū)ο缶幊讨瓻S5語(yǔ)法ES6語(yǔ)法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11SpringMVC+bootstrap table實(shí)例詳解
本文通過(guò)實(shí)例給大家介紹了SpringMVC+bootstrap-table,需要的朋友可以參考下2017-06-06three.js利用射線Raycaster進(jìn)行碰撞檢測(cè)
這篇文章主要為大家詳細(xì)介紹了three.js利用射線Raycaster進(jìn)行碰撞檢測(cè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03淺談javascript中的instanceof和typeof
這篇文章主要簡(jiǎn)單介紹了javascript中的instanceof和typeof的相關(guān)資料,需要的朋友可以參考下2015-02-02JS使用reduce()方法處理樹(shù)形結(jié)構(gòu)數(shù)據(jù)
這篇文章主要介紹了JS使用reduce()方法處理樹(shù)形結(jié)構(gòu)數(shù)據(jù),對(duì)樹(shù)形結(jié)構(gòu)數(shù)據(jù)感興趣的同學(xué),可以參考下2021-05-05