Question

在Popover外部单击时，我需要关闭它（使用Bootstrap 4.21）。我找到了一些示例，但是我使用了不同的方法-弹出框链接到外部元素，而不是单击的元素。
这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

    <a href="javascript:void(0)" onclick="view();">Popover</a>    
    <p style="width:200px" id="my_popover">Popover displayed here</p>

<script>
  function    view(){
  var data = ''+
        '    <div class="list links-list">'+
        '      <div class="list-group">'+
        '      <a id="link1" href="javascript:void(0)" class="list-group-item list-group-item-action">Left Page 1</a>'+
        '      <a id="link2" href="javascript:void(0)" class="list-group-item list-group-item-action">Left Page 2</a>'+
        '    </div>';
    $("#my_popover").popover({
          html : true,
          placement: 'bottom',
          trigger: 'focus',
          content: data
    });
    $("#my_popover").popover('toggle');
  }
</script>
</body>
</html>

在外部单击时如何关闭Popover？
谢谢。

Answer 1

<a id="popover" href="#">Test</a>

$("#popover").popover({
    container: "body",
    content: getContent,
    html: true,
    placement: "bottom",
    trigger: "manual"
}).click(function(event) {
    $("#popover").popover('show');
    event.stopPropagation();
});

$(document).click(function() {
    $("#popover").popover('hide');
});

Answer 2

您可以尝试以下方法：

$(document).click(function(e){
  if($(e.target).is('#popper')){
    var data = ''+
        '    <div class="list links-list>'+
        '      <div class="list-group">'+
        '      <a id="link1" href="javascript:void(0)" class="list-group-item list-group-item-action">Left Page 1</a>'+
        '      <a id="link2" href="javascript:void(0)" class="list-group-item list-group-item-action">Left Page 2</a>'+
        '    </div>';
    $("#my_popover").popover({
      html : true,
      placement: 'bottom',
      trigger: 'focus',
      content: data
    });
    $("#my_popover").popover('toggle');
  }
  else if($(e.target).is('.popover-body')){
    return;
  }
  else if($(e.target).is('#link1')){
    return;
  }
  else if($(e.target).is('#link2')){
    return;
  }
  else {
    $('#my_popover').popover('hide');
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />

<a href="javascript:void(0)" id="popper">Popover</a>    
<p style="width:200px" id="my_popover">Popover displayed here</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

$(document).click(function(e){
  if($(e.target).is('#popper')){
    var data = ''+
        '    <div class="list links-list>'+
        '      <div class="list-group">'+
        '      <a id="link1" href="javascript:void(0)" class="list-group-item list-group-item-action">Left Page 1</a>'+
        '      <a id="link2" href="javascript:void(0)" class="list-group-item list-group-item-action">Left Page 2</a>'+
        '    </div>';
    $("#my_popover").popover({
      html : true,
      placement: 'bottom',
      trigger: 'focus',
      content: data
    });
    $("#my_popover").popover('toggle');
  }
  else if($(e.target).is('.popover-body')){
    return;
  }
  else if($(e.target).is('.list-group-item')){
    return;
  }
  else {
    $('#my_popover').popover('hide');
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />

<a href="javascript:void(0)" id="popper">Popover</a>    
<p style="width:200px" id="my_popover">Popover displayed here</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

在外部单击时关闭Bootstrap 4.21 Popover

2 个答案: