粘贴时更改弹出框位置

Question

我想做的是设置词缀后，我想将弹出窗口的位置更改为我所做的以下操作：

 $('.gallery-holder').on('affix.bs.affix', function (e) {
  console.log('check');

  $(this).find('.popover').popover({
     placement: 'bottom'
  });
})

支票工作完美，但.gallery-holder弹出.gallery-holder位置未更改

这是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>

这是指向bootlpy的链接 ，因为您可以看到它被触发到顶部位置，并且在触发affix.bs.affix时它保持在顶部。

Answer 1

您可以使用placement选项中内置的function调用来简单，可靠地动态分配弹出窗口的placement 。 每次触发弹出框时，您都可以评估导航栏的状态（是否固定），然后对top或bottom进行相关分配。

参考您发布的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';
        }
    }                
});

您可以在这里找到一个有效的示例： http : //www.bootply.com/dNDj85TQVg 。

请注意，以这种方式处理弹出.popover ，应针对初始化元素，而不是弹出.popover本身（因此，Bootstrap将动态添加的.popover而不是）。 在此示例中，我使用了data-toggle属性，但是如果您最终可能遇到多个弹出窗口，则ID或类将更适合用作选择器。