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)站的支持！
您可能感興趣的文章:
- 在iframe中使bootstrap的模態(tài)框在父頁(yè)面彈出問(wèn)題
- Bootstrap的popover（彈出框）2秒后定時(shí)消失的實(shí)現(xiàn)代碼
- 擴(kuò)展bootstrap的modal模態(tài)框-動(dòng)態(tài)添加modal框-彈出多個(gè)modal框
- Bootstrap實(shí)現(xiàn)提示框和彈出框效果
- Bootstrap實(shí)現(xiàn)帶動(dòng)畫過(guò)渡的彈出框
- Bootstrap編寫一個(gè)在當(dāng)前網(wǎng)頁(yè)彈出可關(guān)閉的對(duì)話框 非彈窗
- Bootstrap彈出框(modal)垂直居中的問(wèn)題及解決方案詳解
- 關(guān)于Bootstrap彈出框無(wú)法調(diào)用問(wèn)題的解決辦法
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- bootstrap實(shí)現(xiàn)點(diǎn)擊刪除按鈕彈出確認(rèn)框的實(shí)例代碼
相關(guān)文章
js版本A*尋路算法...2006-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)li標(biāo)簽的刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04
let是ES6里面新的復(fù)制命令，let賦值命令只可以在{}代碼塊中被調(diào)用。這篇文章主要介紹了ES6中的let命令,需要的朋友可以參考下2016-12-12
JavaScript原生數(shù)組函數(shù)實(shí)例匯總
這篇文章主要介紹了JavaScript原生數(shù)組函數(shù)實(shí)例匯總,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
網(wǎng)絡(luò)之美 JavaScript中Get和Set訪問(wèn)器的實(shí)現(xiàn)代碼
前兩天IE9 Beta版發(fā)布了，對(duì)于從事Web開(kāi)發(fā)的朋友們來(lái)說(shuō)真是個(gè)好消息啊，希望將來(lái)有一天各個(gè)瀏覽器都能遵循統(tǒng)一的標(biāo)準(zhǔn)。今天要和大家分享的是JavaScript中的Get和Set訪問(wèn)器，和C#中的訪問(wèn)器非常相似。2010-09-09
js滾動(dòng)條回到頂部的代碼，里面的js代碼比較簡(jiǎn)單，很適合學(xué)習(xí)。2011-12-12
JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)彈出浮動(dòng)窗口,可支持鼠標(biāo)拖動(dòng)和關(guān)閉的功能,界面美觀大方,涉及javascript動(dòng)態(tài)創(chuàng)建對(duì)話框的相關(guān)技巧,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)表單驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
JS無(wú)限極樹(shù)形菜單,json格式、數(shù)組格式通用示例
本文為大家介紹下JS無(wú)級(jí)樹(shù)形菜單的實(shí)現(xiàn)，修改了一下數(shù)據(jù)格式，是json和數(shù)組或者混合型的數(shù)據(jù)都通用，不用特定key等，想學(xué)習(xí)的朋友可以參考下2013-07-07
這篇文章主要介紹了JS獲取并處理php數(shù)組的方法,結(jié)合實(shí)例形式分析了php針對(duì)數(shù)組的創(chuàng)建、轉(zhuǎn)換以及js處理數(shù)組的接收、遍歷、轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09