当我们在前端开发中使用 Twitter Bootstrap 框架时，经常需要在网页上添加弹出窗口。Bootstrap 提供了一个叫做 Popover 的插件，可以轻松地在页面上创建这样的弹出窗口。但是，在默认情况下，Popover 只会在点击该元素本身时关闭。那么，如何实现从任何地方点击关闭 Popover 呢？
实现方法
要实现从任意位置关闭 Popover，我们需要使用 jQuery 和一些 JavaScript 代码。具体步骤如下：
- 在页面头部引入 jQuery 库和 Bootstrap 插件库：
<head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head>
- 给 Popover 所在的元素添加
data-container属性，并将值设置为'body'。这个属性指定 Popover 的容器，使得 Popover 能够覆盖整个页面。
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" title="Popover title" data-content="Some content inside the popover">Click me</button>
- 在 JavaScript 中，监听整个页面的点击事件。如果点击的不是 Popover 元素或其子元素，则关闭 Popover。
$(document).on('click', function (e) {
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="popover"]').popover('hide');
}
});这段代码的含义是，当用户点击页面时，首先判断是否点击了 Popover 元素或其子元素，如果没有，则隐藏所有 Popover。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ------- ---------------
----- ---------------- -----------------------------------------------------------------------------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------------------
-------
------
---- ------------------
------------- ------- ------------
------- ------------- ---------- ------------ --------------------- --------------------- -------------- ------ ------------------ ------- ------ --- -------------- -----------
------
--------
----------------------- -------- --- -
-- --------------------------- --- ---------
-- ----------------------------------------- --- -- -
---------------------------------------------
-
---
---------
-------
-------总结
通过上述步骤，我们可以实现从任何地方单击关闭推特 Bootstrap popover。该方法使用了 jQuery 和一些 JavaScript 代码，但是不需要对 Bootstrap 插件本身进行修改。这种方式可以应用于任何页面中的 Popover 元素，增加了用户体验和页面交互性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9693
