Question

我这里有一个带有动态内容的弹出框，当我单击弹出框按钮时，该弹出框就会显示出来。当我也单击页面的其他区域时，我想关闭它。但是，仅当我单击弹出按钮时，弹出窗口才会关闭。

<a class="btn btn-danger" id="btn-post" data-html="true" data-placement="bottom" data-original-title="Post/Lock">
    Post/Lock
</a>

我没有在HTML代码上设置data-content。我在js上设置了

$("#btn-post").click(function() {
    $("#btn-post").attr("data-content", var_dynamic_content);
    $('#btn-post').popover('show');
});

我已尝试遵循本文中回答的一些代码

How to dismiss a Twitter Bootstrap popover by clicking outside?

但是似乎没有什么适合我。

Answer 1

这个答案确实与您在问题中提到的答案类似...除了用于Twitter‑Bootstrap（Bootstrap 4）之外。

区别似乎在于没有in类。

我并未针对所有用例进行测试...但是此代码段有效。

$(document).ready(function(){

  var var_dynamic_content = "Hello!";

  $("#btn-post").click(function() {
    $("#btn-post").attr("data-content", var_dynamic_content);
    $('#btn-post').popover('show');
  });

  $(document).click(function(e){
    // If the click occurs on #button-post or the popover itself --> exit!
    if(e.target == $("#btn-post")[0] || $(e.target).parents(".popover").length > 0){return;}
    $('#btn-post').popover('hide');
  });

});  // END ready

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<a class="btn btn-danger" id="btn-post" data-html="true" data-placement="bottom" data-original-title="Post/Lock">
    Post/Lock
</a>

CodePen

Answer 2

尝试以下代码：

$('body').click(function() {
    $('#btn-post').popover('hide');
});

无法在外部点击时关闭带有动态内容的引导程序弹出窗口-jQuery

2 个答案: