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)
有時提示框內(nèi)容較多,僅僅使用data-content,title,在html文檔里寫出來比較亂,我們可以借助提供的popover()方法,實(shí)現(xiàn)對彈出框內(nèi)容、樣式的修改。
$("#btn-danger").popover({ html: true, //實(shí)現(xiàn)對html可寫 title: keywords_title(), //標(biāo)題函數(shù) content: function() { return keywords_content(); //內(nèi)容函數(shù) } }); //標(biāo)題函數(shù) function keywords_title() { return '結(jié)果說明:'; } //內(nèi)容函數(shù),同時對樣式進(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)容和樣式示例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 在iframe中使bootstrap的模態(tài)框在父頁面彈出問題
- Bootstrap的popover(彈出框)2秒后定時消失的實(shí)現(xiàn)代碼
- 擴(kuò)展bootstrap的modal模態(tài)框-動態(tài)添加modal框-彈出多個modal框
- Bootstrap實(shí)現(xiàn)提示框和彈出框效果
- Bootstrap實(shí)現(xiàn)帶動畫過渡的彈出框
- Bootstrap編寫一個在當(dāng)前網(wǎng)頁彈出可關(guān)閉的對話框 非彈窗
- Bootstrap彈出框(modal)垂直居中的問題及解決方案詳解
- 關(guān)于Bootstrap彈出框無法調(diào)用問題的解決辦法
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- bootstrap實(shí)現(xiàn)點(diǎn)擊刪除按鈕彈出確認(rèn)框的實(shí)例代碼
相關(guān)文章
JavaScript原生數(shù)組函數(shù)實(shí)例匯總
這篇文章主要介紹了JavaScript原生數(shù)組函數(shù)實(shí)例匯總,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10網(wǎng)絡(luò)之美 JavaScript中Get和Set訪問器的實(shí)現(xiàn)代碼
前兩天IE9 Beta版發(fā)布了,對于從事Web開發(fā)的朋友們來說真是個好消息啊,希望將來有一天各個瀏覽器都能遵循統(tǒng)一的標(biāo)準(zhǔn)。今天要和大家分享的是JavaScript中的Get和Set訪問器,和C#中的訪問器非常相似。2010-09-09JS實(shí)現(xiàn)彈出浮動窗口(支持鼠標(biāo)拖動和關(guān)閉)實(shí)例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)彈出浮動窗口,可支持鼠標(biāo)拖動和關(guān)閉的功能,界面美觀大方,涉及javascript動態(tài)創(chuàng)建對話框的相關(guān)技巧,需要的朋友可以參考下2015-08-08JS無限極樹形菜單,json格式、數(shù)組格式通用示例
本文為大家介紹下JS無級樹形菜單的實(shí)現(xiàn),修改了一下數(shù)據(jù)格式,是json和數(shù)組或者混合型的數(shù)據(jù)都通用,不用特定key等,想學(xué)習(xí)的朋友可以參考下2013-07-07