BootStrap的彈出框(Popover)支持鼠標(biāo)移到彈出層上彈窗層不隱藏的原因及解決辦法
彈出框(Popover)與工具提示(Tooltip)類(lèi)似,提供了一個(gè)擴(kuò)展的視圖。如需激活彈出框,用戶只需把鼠標(biāo)懸停在元素上即可。彈出框的內(nèi)容完全可使用 Bootstrap 數(shù)據(jù) API(Bootstrap Data API)來(lái)填充。該方法依賴于工具提示(tooltip)。
1 設(shè)置延時(shí), 超過(guò)該延時(shí)未移入彈窗則彈窗隱藏
Tooltip.prototype.init = function{中的
var triggers = this.options.trigger.split(' ')后面加上
//設(shè)置延時(shí)
if (this.options.trigger.indexOf('hover') > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}
2 控制不消失代碼
在Tooltip.prototype.enter = function (obj) {中的
clearTimeout(self.timeout)后加入
if (self.options.trigger.indexOf('hover') > -1) {
self.$tip.unbind('mouseenter').bind('mouseenter', function (e) {
self.$tip.data('data-element', self.$element);//觸發(fā)popover框的點(diǎn)擊事件時(shí)可以獲取id
clearTimeout(self.timeout);
self.hoverState = 'in';
}).unbind('mouseleave').bind('mouseleave', function (e) {
self.hoverState = 'out';
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
})
}
bootstrap版本:v3.3.6
下面給大家補(bǔ)充彈出框(Popover)用法
彈出框(Popover)插件根據(jù)需求生成內(nèi)容和標(biāo)記,默認(rèn)情況下是把彈出框(popover)放在它們的觸發(fā)元素后面。您可以有以下兩種方式添加彈出框(popover):
通過(guò) data 屬性:如需添加一個(gè)彈出框(popover),只需向一個(gè)錨/按鈕標(biāo)簽添加 data-toggle="popover" 即可。錨的 title 即為彈出框(popover)的文本。默認(rèn)情況下,插件把彈出框(popover)設(shè)置在頂部。
<a href="#" data-toggle="popover" title="Example popover"> 請(qǐng)懸停在我的上面 </a>
通過(guò) JavaScript:通過(guò) JavaScript 啟用彈出框(popover):
$('#identifier').popover(options)
彈出框(Popover)插件不像之前所討論的下拉菜單及其他插件那樣,它不是純 CSS 插件。如需使用該插件,您必須使用 jquery 激活它(讀取 javascript)。使用下面的腳本來(lái)啟用頁(yè)面中的所有的彈出框(popover):
$(function () { $("[data-toggle='popover']").popover(); });
相關(guān)文章
微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁(yè)面方法實(shí)例代碼
微信小程序是一種全新的連接用戶與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于微信小程序web-view環(huán)境下H5跳轉(zhuǎn)小程序頁(yè)面方法的相關(guān)資料,需要的朋友可以參考下2022-08-08
JavaScript獲取網(wǎng)頁(yè)中第一個(gè)鏈接ID的方法
這篇文章主要介紹了JavaScript獲取網(wǎng)頁(yè)中第一個(gè)鏈接ID的方法,涉及javascript中document.links方法的使用,需要的朋友可以參考下2015-04-04
關(guān)于JavaScript的with 語(yǔ)句的使用方法
JavaScript 有個(gè) with 關(guān)鍵字, with 語(yǔ)句的原本用意是為逐級(jí)的對(duì)象訪問(wèn)提供命名空間式的速寫(xiě)方式. 也就是在指定的代碼區(qū)域, 直接通過(guò)節(jié)點(diǎn)名稱(chēng)調(diào)用對(duì)象2011-05-05
javascript中的nextSibling使用陷(da)阱(keng)
關(guān)于HTML/XML節(jié)點(diǎn)的問(wèn)題,在IE中nextSibling不會(huì)返回文本節(jié)點(diǎn),而chrome或者firefox等會(huì)返回文本節(jié)點(diǎn)2014-05-05
用JavaScript獲取頁(yè)面文檔內(nèi)容的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇用JavaScript獲取頁(yè)面文檔內(nèi)容的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
javascript創(chuàng)建動(dòng)態(tài)表單的方法
這篇文章主要介紹了javascript創(chuàng)建動(dòng)態(tài)表單的方法,實(shí)例分析了javascript動(dòng)態(tài)操作頁(yè)面表單元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
隨鼠標(biāo)移動(dòng)的時(shí)鐘非常漂亮遺憾的是只支持IE
這篇文章主要介紹了隨鼠標(biāo)移動(dòng)的時(shí)鐘非常漂亮遺憾的是只支持IE,需要的朋友可以參考下2014-08-08
一個(gè)字符串中出現(xiàn)次數(shù)最多的字符 統(tǒng)計(jì)這個(gè)次數(shù)【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)?lái)一篇一個(gè)字符串中出現(xiàn)次數(shù)最多的字符 統(tǒng)計(jì)這個(gè)次數(shù)【實(shí)現(xiàn)代碼】。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04

