Bootstrap 3彈出隱藏在隱藏溢出的元素後面

請花一些時間先看一下代碼。我正在使用BS3。Bootstrap 3彈出隱藏在隱藏溢出的元素後面

的HTML

<div class="my-div"> 
    <a href="#">A link</a> 
</div> 
<div class="cool-div"> 
<p>bla and bla</p> 
</div>

的JS：

// Make PopOver stay while one mouseover on it 
var originalLeave = $.fn.popover.Constructor.prototype.leave; 
$.fn.popover.Constructor.prototype.leave = function(obj){ 
    var self = obj instanceof this.constructor ? 
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) 
    var container, timeout; 

    originalLeave.call(this, obj); 

    if(obj.currentTarget) { 
    container = $(obj.currentTarget).siblings('.popover') 
    timeout = self.timeout; 
    container.one('mouseenter', function(){ 
     //We entered the actual popover – call off the dogs 
     clearTimeout(timeout); 
     //Let's monitor popover content instead 
     container.one('mouseleave', function(){ 
     $.fn.popover.Constructor.prototype.leave.call(self, self); 
     }); 
    }) 
    } 
}; 

// Show User Details PoPOver 
$('.my-div').popover({ 
    trigger: 'hover', 
    placement: 'auto', 
    html:true, 
    delay: {show: 50, hide: 400}, 
    content: function() { 
      return $(this).next('.cool-div').html(); 
     } 
}); 

// Make some custom styling on User Details PoPOver 
$(function() { 
    $('.my-div').on('shown.bs.popover', function() { 
     var $this = $(this), 
      popover = $this.next('.popover'); 
      popover.find('.popover-content').css({padding: '5px 5px 8px 5px', 'margin-right':'-18px'}); 
    }); 
});

好了，所以我所做的就是我做的酥料餅而留，然後顯示在第一段代碼就可以了一個鼠標懸停和它和一些自定義樣式。

現在，一切都很好，但在一些較小的分辨率我有一個div是溢出：隱藏導致我的Popover隱藏在它後面。我增加.popover的z-index的，沒有工作..
我研究，並與容器嘗試的價值：「身體」或容器：「我-DIV」以及數據 - 容器=「body」在html中。

雖然它解決了這個問題，但彈出窗口並沒有停留在鼠標懸停狀態，以及CSS也沒有被連接。

我怎麼能一起實現所有這三個？感謝提前一噸。

來源

2014-05-13 the.big.lebowski

你可以發佈你的代碼的完整示例，包括那個溢出的div：隱藏在它上面，所以我可以看看完整的問題。我不知道你在哪裏放置在其他分區所以它有點難以解決現在:)

這裏是一些propably不必要的建議:)

我通常添加（或切換）一個CSS的元素我想要控制而不是添加CSS屬性。因此，而不是：

popover.find（ '酥料餅的內容 '）的CSS（{填充： '5像素5像素8像素5像素'， '保證金右'：' - 部18px'}）。

我會使用：

popover.find（ '酥料餅含量。'）addClass（「styleme」）;。

Regards，

來源

2015-07-10 14:54:19

Bootstrap 3彈出隱藏在隱藏溢出的元素後面

回答

相關問題