Question

我想点击外面（或点击屏幕）关闭popover。我在这种情况下做错了什么？

HTML

<div class="container">
   <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover Example</a>
   <div>
    <button type="button" class="btn btn-warning">Hide</button>
   </div>   
</div>

JS

$(document).ready(function(){
$("[data-toggle='popover']").click(function(){
    $("[data-toggle='popover']").popover('show');
});
$(body).click(function(){
    $("[data-toggle='popover']").popover('hide');
});

});

小提琴 https://jsfiddle.net/1rbddcap/1/

Answer 1

您的代码中有两个问题：

1）$(body)应为$('body')。标记名选择器需要包含在引号中。

2）停止父体事件传播到popover点击以使显示功能工作。

$("[data-toggle='popover']").click(function(e){
e.stopPropagation()
    $("[data-toggle='popover']").popover('show');
});
$('body').click(function(){
    $("[data-toggle='popover']").popover('hide');
});

<强> Working Demo

Answer 2

尝试使用以下代码可以帮助您解决问题

$(document).ready(function(){
    $("[data-toggle='popover']").click(function(){
        $("[data-toggle='popover']").popover('show');
        return false;
    });
    $('body').click(function(){
        $("[data-toggle='popover']").popover('hide');
    });
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Popover Example</a>
  <div>
    <button type="button" class="btn btn-warning">Hide</button>
  </div>   
</div>

如何让popover在这个函数中关闭？

2 个答案: