在页面加载时打开一个弹出窗口并在单击其他任何位置时隐藏 + 调整窗口大小时动态跟随它的父级答案

【问题标题】：Open one popover on page load and hide when clicked anywhere else + dynamically follow it's parent when resizing window在页面加载时打开一个弹出窗口并在单击其他任何位置时隐藏 + 调整窗口大小时动态跟随它的父级
【发布时间】：2025-12-29 15:15:11
【问题描述】：

所以我一直在使用 bootstrap 的内置弹出框。我对 JS 很陌生，所以请善待！

我已经设法让多个弹出框以我喜欢的方式显示和隐藏，但我非常希望它们跟随在调整窗口大小时触发弹出框的元素以及当用户加载第一个弹出框时加载页面。

我在这里搜索过，第一个在加载时显示，但在点击其他任何内容时它不会隐藏。

使用

$(function () { 
 $("#popbadge1").popover('show');
});

我的 js

$(document).ready(function () {

$("#popbadge1").popover({
    html : true, 
    content: function() {
      return $('#hiddenpopbadge1').html();
    },
});
$("#popbadge2").popover({
    html : true, 
    content: function() {
      return $('#hiddenpopbadge2').html();
    },
});
$("#popbadge3").popover({
    html : true, 
    content: function() {
      return $('#hiddenpopbadge3').html();
    },
});
});

我的标记

<ul>      
 <li><a class="badge1" id="popbadge1" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">1</a></li>
 <!-- Popover 1 hidden content -->
 <div id="hiddenpopbadge1" style="display: none">
    <h3>Content</h3>
 </div>  

  <li><a class="badge2" id="popbadge2" href="#" role="button" data-trigger="focus" tabindex="0"  data-placement="bottom">2</a></li>
  <!-- Popover 2 hidden content -->
  <div id="hiddenpopbadge2" style="display: none">
    <h3>Content 2</h3>
  </div>

  <li><a class="badge3" id="popbadge3" href="#" role="button" data-trigger="focus" tabindex="0"  data-placement="bottom">3</a></li>
<!-- Popover 3 hidden content -->
<div id="hiddenpopbadge3" style="display: none">
    <h3>Content 3</h3>
</div>
</ul>

理想情况下，我希望弹出框在调整窗口大小时也跟随触发它的按钮。

有人可以帮忙吗？

【问题讨论】：

你认为你可以让你的实际代码在 JSFiddle 中工作吗？

标签： javascript jquery twitter-bootstrap popover window-resize

【解决方案1】：

对我来说，不清楚你的意思是什么......

“我非常希望他们在调整窗口大小时跟随触发弹出框的元素......”

然而，让弹出框显示在页面加载只是将您的第一个代码 sn-p 放入 (document).ready() 中的问题。

当点击页面上的任何其他内容时隐藏弹出框类似于this question，它适用于以下内容：

$(function () {
    // When anything is clicked...
    $('*').click(function (e) {
        // Except popbadge1
        if (e.target.attr != 'popbadge1') {
            // Hide the popover
            $("#popbadge1").popover('hide');
        }
    });
});

但是当您尝试点击返回第一个链接时会发生一些事情，它不会打开弹出窗口。可能与 Bootstrap 发生冲突，或者我错过了什么？无论如何，一个简单的检查，看看弹出框是否在解决它之前被隐藏过一次。

这是full solution at JSFiddle。

【讨论】：

用 text-align: center 将你的 HTML 包装在一个 div 中让我看到你在说什么让元素“跟随”它的父元素。对于那个问题，您是否希望用户调整窗口大小？无论窗口多宽，它似乎都能在正确的位置加载。
感谢 grayspvce 的回复，这正是我在加载元素时所做的，我错过了 hiddenOnce 查询。
抱歉没有真正的意义。我正在与在打开弹出窗口的情况下调整窗口大小时触发它的链接之后的弹出窗口作斗争。我不希望用户调整窗口大小，但如果他们这样做，它看起来像一个小故障。您上面的代码有效，但正如您所提到的，一旦关闭第一个弹出窗口，您将无法重新打开它。这与加载时不“活跃”有关吗？
在我上面发布的小提琴中，至少对我来说，第一个弹出窗口一旦关闭就会重新打开。我不确定“.focus();”是什么除了在默认情况下使链接处于活动状态之外，正在添加它。但是，如果这就是你想要它做的事情，那么我很高兴你能完成所有工作。干杯！
非常感谢您的帮助，我确实对实际页面上的有焦点效果，所以最好使用焦点来实现它，但将在另一个页面上使用 JS 提示，所以再次感谢

【解决方案2】：

感谢 grayspace 让弹出框在加载时显示一个，除了他的回答之外，我将第一个弹出框设置为焦点，它似乎已经修复了小故障。

$(function() {
 $("#popbadge1").focus();
});

https://jsfiddle.net/j4dut2ux/

您还将通过显示为内联框并在 .a 周围添加一个具有相对和绝对定位的 div 在小提琴中看到相应的弹出框现在跟随其父级。

【讨论】：