Bootstrap: popover button click

Question

Я использовал функцию bootstrap popover, теперь она работает. Но мне нужно «уволить» popover box, если я нажимаю в любом месте страницы. проверьте код, который я использовал.

Сначала щелкните по кнопке, после чего мне нужно «уволить» поле «всплывающее окно» при щелчке по черному пространству (теперь его отклонение только тогда, когда мы нажали на ту же кнопку).

$(document).ready(function() { 
 
    $('[data-toggle="popover"]').popover(); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;"> 
 
    <a href="#" title="Header" data-toggle="popover" data-content="Some content" class="btn btn-danger">Click here</a> 
 
    <br> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

Это будет работать

Использование ниже JavaScript для смещать поповер когда снаружи нажмите

$('body').on('click', function (e) { 
    $('[data-toggle="popover"]').each(function() { 
     //the 'is' for buttons that trigger popups 
     //the 'has' for icons within a button that triggers a popup 
     if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { 
      $(this).popover('hide'); 
     } 
    }); 
}); 

Answer 2

Просто используйте data-trigger="focus" в a теге

Для получения дополнительной информации ознакомьтесь Dismissible popover

$(document).ready(function() { 
 
    $('[data-toggle="popover"]').popover(); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;"> 
 
    <a href="#" title="Header" data-toggle="popover" data-content="Some content" class="btn btn-danger" data-trigger="focus">Click here</a> 
 
    <br> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 3

Попробуйте

$(document).ready(function(){ 
$('[data-toggle="popover"]').popover({trigger:'focus'}); 
}); 

$(document).ready(function(){ 
 
$('[data-toggle="popover"]').popover({trigger:'focus'}); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 

 

 

 
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;"> 
 
    <a href="#" title="Header" data-toggle="popover" data-content="Some content" class="btn btn-danger">Click here</a><br> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>