如何檢查twitter引導彈窗是否可見？

我有一個元素$('#anElement')附加有潛力酥料餅，像如何檢查twitter引導彈窗是否可見？

<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div>

我只是想知道如何檢查是否酥料餅是可見或不可見：這可怎麼使用jQuery來完成？

來源

2012-11-18 Gombo

請詳細說明。 –

@bram - 在正常情況下，我會全心全意地認同你。但是在這種情況下，標記是標準（twitter）引導標記。 – Lix

@Lix對於不熟悉Bootstrap的人來說，對標記看起來像是什麼樣的想法可能是有用的 –

如果這個功能沒有內置到您正在使用（框架它不再twitter bootstrap，只是bootstrap），那麼你必須檢查生成/修改的HTML來創建引導的這個特性。

看看popupver documentation。在那裏有一個按鈕，您可以使用它看到它的行動。這是檢查幕後HTML元素的好地方。

破解你的chrome開發工具或firebug（firefox），看看它發生了什麼。它看起來像有很簡單的按鈕後插入一個<div> -

<div class="popover fade right in" style="... />

所有您需要做的是檢查該元素的存在。根據您的標記是如何寫的，你可以使用這樣的事情 -

if ($("#popoverTrigger").next('div.popover:visible').length){ 
    // popover is visible 
}

#popoverTrigger是觸發該酥料餅的出現在首位的元素，因爲我們注意到上述情況，引導就追加後的酥料餅的div元件。

來源

2012-11-18 17:55:06 Lix

這不適用於IE8及以下版本。 – hofnarwillie

@hof - 也許引導程序以不同的方式處理IE8 ... – Lix

是的，也許。似乎無法正確調試它。在IE8模式下使用IE9調試器，但在彈出窗口可見時看不到任何對DOM的修改。 – hofnarwillie

這將檢查給定的div是否可見。

if ($('#div:visible').length > 0)

或

if ($('#div').is(':visible'))

來源

2012-11-18 17:50:03 KingKongFrog

沒有在自舉酥料餅的插件顯式實現，所以你需要找到周圍的方式方法。這是一個黑客，它會返回真或假的插件可見或不可見。

var isVisible = $('#anElement').data('bs.popover').tip().hasClass('in'); 
console.log(isVisible); // true or false

它訪問由酥料餅的插件，它實際上是一個Popover對象存儲的數據，調用該對象的tip()方法，其是負責獲取尖端元件，然後檢查是否返回的元素具有類in，這表示連接到該元素的彈出窗口是可見的。

您也應該檢查是否有連接，以確保您可以調用tip()方法酥料餅：

if ($('#anElement').data('bs.popover') instanceof Popover) { 
    // do your popover visibility check here 
}

來源

2012-11-18 17:52:40 Bogdan

+17

BOOTSTRAP 3注意：在BS3中，他們將其更改爲bs.popover而不是popover。例如：'$（'＃anElement'）。data（'bs.popover'）' – Kyle

謝謝你的解決方案，但這仍然是一種破解。我遇到了這個需求，因爲hide在切換時沒有正確清理HTML DOM。 –

在當前版本的Bootstrap中，您可以檢查您的元素是否已設置aria-describedby。該屬性的值是實際彈出窗口的id。

因此，舉例來說，如果你想改變可見酥料餅的內容，你可以這樣做：

var popoverId = $('#myElement').attr('aria-describedby'); 
$('#myElement').next(popoverid, '.popover-content').html('my new content');

來源

2015-04-28 15:36:40

-1

使用酥料餅用的自舉4，尖端（）似乎並沒有成爲一個功能了。這是爲了檢查是否啓用了一酥料餅的一種方式，基本上如果被點擊它，是積極的：

if ($('#element').data('bs.popover')._activeTrigger.click == true){ 
...do something 
}

來源

2017-02-28 19:28:52 eaton9000

下劃線屬性是內部實現細節。它們將被視爲可以隨時更改，這意味着您的小代碼段可以（閱讀：will）在將來的某個時間點隨機中斷，而不會有任何警告（如更新日誌或API棄用警告）。 –

也許是最可靠的選擇將聽取顯示/隱藏事件，如下面所示。這將消除深入研究可能容易出錯的DOM的必要性。

var isMyPopoverVisible = false;//assuming popovers are hidden by default 

$("#myPopoverElement").on('shown.bs.popover',function(){ 
isMyPopoverVisible = true; 
}); 

$("#myPopoverElement").on('hidden.bs.popover',function(){ 
isMyPopoverVisible = false; 
});

這些事件似乎就算你隱藏/顯示/切換酥料餅的編程方式，無需用戶交互被觸發。使用BS3測試P.S.

來源

2017-06-05 06:12:43

如何檢查twitter引導彈窗是否可見？

回答

相關問題