快捷導(dǎo)航

Bootstrap彈出框之自定義懸?？驑?biāo)題、內(nèi)容和樣式示例代碼

更新時(shí)間：2017年07月11日 16:03:12 作者：LeapMotion1

這篇文章主要介紹了Bootstrap彈出框之自定義懸停框標(biāo)題、內(nèi)容和樣式示例代碼,需要的朋友可以參考下

1.Bootstrap彈出框示例

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">點(diǎn)我彈出/隱藏彈出框</button>

這里寫圖片描述

2.改進(jìn)

有時(shí)提示框內(nèi)容較多，僅僅使用data-content,title,在html文檔里寫出來(lái)比較亂，我們可以借助提供的popover（）方法，實(shí)現(xiàn)對(duì)彈出框內(nèi)容、樣式的修改。

$("#btn-danger").popover({
 html: true,  //實(shí)現(xiàn)對(duì)html可寫
 title: keywords_title(), //標(biāo)題函數(shù)
 content: function() {
  return keywords_content(); //內(nèi)容函數(shù)
 }
});
//標(biāo)題函數(shù) 
function keywords_title() {
 return '結(jié)果說(shuō)明：';
}
//內(nèi)容函數(shù)，同時(shí)對(duì)樣式進(jìn)行修改
function keywords_content() {
 var data = $('<div style="width:700px;color: #787671" ><p><span>提及結(jié)果列關(guān)鍵詞不區(qū)分英文大小寫</span></p></div>');
}
//以下是彈出框樣式，可以根據(jù)需要自定義修改
.popover {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1060;
 display: none;
 max-width: 276px;
 padding: 1px;
 font-size: 14px;
 font-weight: 400;
 line-height: 1.42857143;
 text-align: left;
 white-space: normal;
 background-color: #fff;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 border: 1px solid #ccc;
 border: 1px solid rgba(0,0,0,.2);
 border-radius: 6px;
 -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
 box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

以上所述是小編給大家介紹的Bootstrap彈出框之自定義懸?？驑?biāo)題、內(nèi)容和樣式示例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

uni-app實(shí)現(xiàn)熱更新的詳細(xì)操作步驟
隨著 App 成功上架,可能更新頻率往往會(huì)越來(lái)越高,傳統(tǒng)的應(yīng)用更新方式要求用戶重新下載并安裝應(yīng)用,這不僅耗費(fèi)用戶大量時(shí)間、流量,還嚴(yán)重影響用戶體驗(yàn),為了提升用戶體驗(yàn),熱更新技術(shù)應(yīng)運(yùn)而生,所以本文介紹了uni-app實(shí)現(xiàn)熱更新的詳細(xì)操作步驟,需要的朋友可以參考下
2025-04-04
js實(shí)現(xiàn)下拉框選擇要顯示圖片的方法
這篇文章主要介紹了js實(shí)現(xiàn)下拉框選擇要顯示圖片的方法,涉及針對(duì)js操作select的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
基于layui內(nèi)置模塊(element常用元素的操作)
今天小編就為大家分享一篇基于layui內(nèi)置模塊(element常用元素的操作)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
利用純js + transition動(dòng)畫實(shí)現(xiàn)移動(dòng)端web輪播圖詳解
這篇文章主要給大家介紹了利用純js + transition動(dòng)畫實(shí)現(xiàn)移動(dòng)端web輪播圖的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-09-09
JS中substring與substr的用法
這篇文章主要介紹了JS中substring與substr的用法講解，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-11-11
uniapp?APP消息推送方案實(shí)現(xiàn)全過(guò)程
前段時(shí)間開發(fā)app的時(shí)候要開始做消息推送功能了,下面這篇文章主要給大家介紹了關(guān)于uniapp?APP消息推送方案實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
前端實(shí)現(xiàn)PDF文件預(yù)覽的7種方案與性能對(duì)比詳解
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)PDF文件預(yù)覽的7種方案與性能對(duì)比,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-03-03
信息滾動(dòng)效果的實(shí)例講解
下面小編就為大家?guī)?lái)一篇信息滾動(dòng)效果的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
js動(dòng)態(tài)修改input輸入框的type屬性(實(shí)現(xiàn)方法解析)
本文是對(duì)js動(dòng)態(tài)修改input輸入框的type屬性的實(shí)現(xiàn)方法。進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
JavaScript數(shù)組迭代器實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)組迭代器的用法,涉及javascript數(shù)組操作的相關(guān)技巧,需要的朋友可以參考下
2015-06-06