引导:点击弹出窗口按钮

Bootstrap: popover button click

本文关键字：窗口 按钮 引导      更新时间：2023-09-26

我已经使用了bootstrap弹出窗口功能，它现在工作。但我需要"解散"弹出框，如果我点击页面的任何地方。请检查我使用的代码

首先点击按钮，然后我需要在点击黑色空间时"解散"弹出框(现在只有当我们点击同一按钮时才会解散)。

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

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

可以了

使用下面的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');
        }
    });
});

试试这个

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

相关文章：