Уволить Bootstrap 4.21 Popover при нажатии снаружи - PullRequest
Новая
       5

Уволить Bootstrap 4.21 Popover при нажатии снаружи

0 голосов
/ 20 января 2019

Мне нужно закрыть Popover (используя Bootstrap 4.21) при щелчке вне его. Я нашел несколько примеров, но я использую другой подход - popover связан с внешним элементом, а не с выбранным элементом.
Вот мой код: 

<!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 при нажатии снаружи?
Спасибо.

Ответы [ 2 ]

0 голосов
/ 20 января 2019

Вы можете попробовать это: 

$(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>
0 голосов
/ 20 января 2019 
<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');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...