文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在此函数中关闭弹出窗口？

问如何在此函数中关闭弹出窗口？
EN

Stack Overflow用户

提问于 2016-04-13 15:35:46

回答 2查看 39关注 0票数 2

我想通过单击外部(或在屏幕上单击)关闭弹出窗口。在这种情况下，我做错了什么？

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>

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

javascript

jquery

回答 2

Stack Overflow用户

发布于 2016-04-13 15:39:04

你的代码中有两个问题：

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

2)停止父体事件传播，弹出点击，使show函数工作。

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

票数 0

Stack Overflow用户

发布于 2016-04-13 16:01:51

尝试下面的代码可能会帮助你解决这个问题

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36591588

复制

相似问题

问如何在此函数中关闭弹出窗口？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在此函数中关闭弹出窗口？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在此函数中关闭弹出窗口？
EN