Question

我使用了bootstrap popover功能，它现在正在工作..但我需要＆＃34;解雇＆＃34;弹出框如果我点击页面中的任何位置。请检查我使用的代码。

首先点击按钮然后我需要＆＃34;解雇＆＃34;单击黑色空格时的弹出框（现在只有当我们点击同一个按钮时才会被忽略）。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

只需在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 2

这将有效

在外部点击

时，使用以下javascript来关闭popover

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

Bootstrap：弹出按钮单击

3 个答案: