粘貼時更改彈出框位置

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或類將更適合用作選擇器。