当我们在前端开发中使用 Twitter Bootstrap 框架时，经常需要在网页上添加弹出窗口。Bootstrap 提供了一个叫做 Popover 的插件，可以轻松地在页面上创建这样的弹出窗口。但是，在默认情况下，Popover 只会在点击该元素本身时关闭。那么，如何实现从任何地方点击关闭 Popover 呢？
实现方法
要实现从任意位置关闭 Popover，我们需要使用 jQuery 和一些 JavaScript 代码。具体步骤如下：
- 在页面头部引入 jQuery 库和 Bootstrap 插件库：
------ ------- ----------------------------------------------------------- ------- ----------------------------------------------------------------------------------- -------
- 给 Popover 所在的元素添加
data-container属性，并将值设置为'body'。这个属性指定 Popover 的容器，使得 Popover 能够覆盖整个页面。
------- ------------- ---------- ------------ --------------------- --------------------- -------------- ------ ------------------ ------- ------ --- -------------- -----------
- 在 JavaScript 中，监听整个页面的点击事件。如果点击的不是 Popover 元素或其子元素，则关闭 Popover。
----------------------- -------- --- -
-- --------------------------- --- ---------
-- ----------------------------------------- --- -- -
---------------------------------------------
-
---这段代码的含义是，当用户点击页面时，首先判断是否点击了 Popover 元素或其子元素，如果没有，则隐藏所有 Popover。
示例代码
下面是一个完整的示例代码：
--------- -----
----- ----------
------
----- ----------------
---------------- ------- ---------------
----- ---------------- -----------------------------------------------------------------------------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------------------
-------
------
---- ------------------
------------- ------- ------------
------- ------------- ---------- ------------ --------------------- --------------------- -------------- ------ ------------------ ------- ------ --- -------------- -----------
------
--------
----------------------- -------- --- -
-- --------------------------- --- ---------
-- ----------------------------------------- --- -- -
---------------------------------------------
-
---
---------
-------
-------总结
通过上述步骤，我们可以实现从任何地方单击关闭推特 Bootstrap popover。该方法使用了 jQuery 和一些 JavaScript 代码，但是不需要对 Bootstrap 插件本身进行修改。这种方式可以应用于任何页面中的 Popover 元素，增加了用户体验和页面交互性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/9693