[英]Change popover position when affix
What I want to do is when affix is set I want to change the popover position to bottom what I did is this: 我想做的是设置词缀后,我想将弹出窗口的位置更改为我所做的以下操作:
$('.gallery-holder').on('affix.bs.affix', function (e) {
console.log('check');
$(this).find('.popover').popover({
placement: 'bottom'
});
})
The check works perfect but the position of the popover in .gallery-holder
is not changing its position 支票工作完美,但.gallery-holder
弹出.gallery-holder
位置未更改
and this is the html: 这是HTML:
<div class="gallery-holder affix">
<label class="price-label">
All-in prijs
<span class="material-icons" data-content="
<ul class='list-checked'>
<li>Basishuursom</li>
<li>Reserveringskosten</li>
<li>Eindschoonmaak</li>
<li>Lokale heffingen</li>
</ul>
<p>Boek je een vakantiehuis of vakantietent?</p>
<p>Ontvang gratis de <a href='/vakantiepark/park/attractiepas'>AttractiePas</a>!</p>
" data-placement="auto top" data-toggle="popover" data-trigger="focus" tabindex="0" title="" data-original-title="Alle prijzen zijn inclusief:">
help
</span>
</label>
</div>
here is a LINK to a bootlpy, as you can see it is triggered to a top placement and it stays at top when the affix.bs.affix
is triggered 这是指向bootlpy的链接 ,因为您可以看到它被触发到顶部位置,并且在触发affix.bs.affix
时它保持在顶部。
You can dynamically assign the position of a popover simply and reliably using the function
call built into the placement
option. 您可以使用placement
选项中内置的function
调用来简单,可靠地动态分配弹出窗口的placement
。 Every time the popover is triggered, you can evaluate the status of the navbar (fixed or not) and then make the relevant assignment of top
or bottom
. 每次触发弹出框时,您都可以评估导航栏的状态(是否固定),然后对top
或bottom
进行相关分配。
With reference to the Bootply you posted, this is the only JavaScript needed: 参考您发布的Bootply,这是唯一需要的JavaScript:
$('[data-toggle=popover]').popover({placement: function() {
if($('.navbar-inverse').hasClass('affix-top')) {
// console.log('top');
return 'top';
}
else {
// console.log('bottom');
return 'bottom';
}
}
});
You can find a working example here: http://www.bootply.com/dNDj85TQVg . 您可以在这里找到一个有效的示例: http : //www.bootply.com/dNDj85TQVg 。
Please note that when you're handling a popover in this way, you should target the initialising element and not the popover itself (so not .popover
, which Bootstrap adds dynamically). 请注意,以这种方式处理弹出.popover
,应针对初始化元素,而不是弹出.popover
本身(因此,Bootstrap将动态添加的.popover
而不是)。 For this example I used the data-toggle
attribute, but in cases where you may end up with more than one popover, an ID or class would be more suitable as a selector. 在此示例中,我使用了data-toggle
属性,但是如果您最终可能遇到多个弹出窗口,则ID或类将更适合用作选择器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.