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

Question

所以我一直在玩弄来自 bootstrap 的内置弹出窗口。我是 JS 的新手，所以请多关照！

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

我在这里搜索并找到了第一个在加载时显示的内容，但在单击其他内容时它不会隐藏。

正在使用

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

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

有人能帮忙吗？

Answer 1

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

"I would very much like them to follow the element that fires the popover when resizing the window..."

但是，让弹出窗口在页面加载时显示只是将您的第一个代码片段放入 (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');
        }
    });
});

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

这是 full solution at JSFiddle。

Answer 2

感谢 grayspace 让 popover 在加载时显示一个，除了他的回答之外，我还设置了第一个 popover 为焦点，它似乎已经解决了轻微的故障。

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

https://jsfiddle.net/j4dut2ux/

您还将在 fiddle 中看到，通过显示为内联框并在 .a 周围添加一个 div 并相应地使用相对和绝对定位，弹出框现在跟随其父项。

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

Open one popover on page load and hide when clicked anywhere else + dynamically follow it's parent when resizing window

javascript

jquery

popover

window-resize

twitter-bootstrap