如何在此函数中关闭popover

How to make popover close in this function?

本文关键字：popover 函数      更新时间：2024-06-18

我想通过点击外部（或点击屏幕）来关闭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');
});
});

Fiddlehttps://jsfiddle.net/1rbddcap/1/

您的代码中有两个问题：

1） $(body)应该是$('body')。标记名选择器需要用引号括起来。

2） 停止父主体事件传播到弹出式点击，以使显示功能正常工作。

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

工作演示

尝试以下代码可能会帮助您解决问题

$(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>

相关文章：