Question

我做了以下弹出： https://jsfiddle.net/ca4h0a0q/

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
 <button class="close">
  x
  </button>
  <div>This is your div content</div> 
</div>

使用Javascript：

$(document).ready(function(){
    $("body").on("click",".close",function(){
    $(".danger").trigger("click");  
  });

  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

为了关闭popover，由于这个bug：https://github.com/twbs/bootstrap/issues/16732我不得不在打开它的按钮上触发click事件。我不太喜欢这个解决方案。有没有更好的方法呢？

Answer 1

我这样做了。

<div id="popover_content_wrapper" style="display: none">
  <button class="close" onclick="$('.danger').popover('hide').trigger('click')">
    x
  </button>
<div>This is your div content</div>

和js ......

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

Answer 2

我会替换这个

$("body").on("click",".close",function(){
    $(".danger").trigger("click");  
});

有了这个

$("body").on("click",".close",function(){
    $(this)
        .closest("a.danger")
        .trigger("click");  
});

有关closest的更多信息：http://api.jquery.com/closest/

这样一来，如果你有多个弹出框或一个类danger的元素，他们也不会被触发。

Answer 3

当您知道源元素的ID（或类或其他要标识的内容）时：

$('#<id>').popover('hide');

或

$('#<id>').popover('dispose');

可以正常工作。

如果在创建时添加类popover_show，例如

$(info.jsEvent.srcElement).addClass('popover_show');

您可以使用.popover_show类关闭/处理所有打开的弹出窗口：

$('.popover_show').popover('dispose');

或

$('.popover_show').popover('dispose');

删除所有弹出窗口的粗略方法（如果您有麻烦或想要清理的话）。

$('.popover').remove();

（如果您有嵌套的Popover，manuell将DOM元素添加到Popover，隐藏元素...）

Bootstrap popover，关闭按钮

3 个答案: