Twitter-Bootstrap彈出窗口的動態放置

我正在嘗試爲自舉彈出窗口創建一個動態位移函數，以便如果內容太大而無法在沒有垂直滾動的情況下在「底部」放置的屏幕上顯示，向上展示「top」展示位置。Twitter-Bootstrap彈出窗口的動態放置

對於這一點，我創建了一個功能：

function popoverPlacement(popoverHeight, element) { 
    var offset = element.offset().top; 
    var height = popoverHeight; 
    var docheight = $(document).height(); 

    if (offset + height >= docheight) { 
     return "top"; 
    } 
    else { 
     return "bottom" 
    } 
}

不幸的是，我需要指定popoverHeight作爲一個硬編碼值，因爲對於酥料餅生成內容，而不是添加到DOM，所以我不能獲得它的高度。

這是如何使用它：

$(this).popover({ 
      placement: function() { return popoverPlacement(270, this.$element); }, 
      title: "Status", 
      trigger: "click", 
      content: editStatusContent, 
      html: true, 
      delay: { 
       show: 1, 
       hide: 1 
      }, 
      animation: false 
     });

有一個動態的方式來實現這一目標？

感謝

來源

2013-02-14 So Many Goblins

您可以通過內容文檔作爲無形的節點，這樣其附加測量你的酥料餅：

var tpl = this.options.template; 
var $inner_el = $(this.options.content).clone(false); 
var $measure_el = $('.popover-content', tpl).append($inner_el) 
              .parents('.popover'); 
$measure_el.css({ 
    visibility: 'hidden', 
    position: 'absolute' 
}); 

$measure_el.appendTo('body'); 
actual_height = $measure_el.height(); 
actual_width = $measure_el.width(); 
$measure_el.remove();

來源

2013-02-28 14:17:08

我發現，您可以顯示工具提示後，使用絕對定位：

$('#liveCallData').tooltip('show'); 
var tooltip = $('#liveCallData .tooltip'); 
width = tooltip.width();

將它定位：

tooltip.css({'position': 'absolute', top: y - 41, left: x - (width/2) - 1});

來源

2013-04-24 18:34:06

Twitter-Bootstrap彈出窗口的動態放置

回答

相關問題