Bootstrap：popover按钮点击

我已经使用bootstrap popover功能，现在它的工作..但我需要“关闭”弹出框，如果我点击页面中的任何地方。请检查我使用的代码。Bootstrap：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">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>

来源

2016-11-07 Vishnu

看这里 - http://stackoverflow.com/questions/11703093 /如何对解雇-A-TWIT ter-bootstrap-popover-by-outside – TT8

http://stackoverflow.com/questions/8947749/how-can-i-close-a-twitter-bootstrap-popover-with-a-click-from-anywhere-其他 - 在 – prasanth

这将在下面工作的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'); 
     } 
    }); 
});

来源

2016-11-07 10:14:11

非常感谢......它的工作:) – Vishnu

在a标签只需使用data-trigger="focus"

欲了解更多信息检查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>

来源

2016-11-07 10:15:45

试试这个

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

来源

2016-11-07 10:17:41

Bootstrap：popover按钮点击

回答

相关问题