Question

我想使用弹出框来扩充html中的文本。文本中包含秘密，如果单击它们，则弹出窗口会显示秘密背后的内容。

弹出窗口包含一些交互作用的可能性，例如提供有关机密的反馈。目前，我正在使用引导弹出窗口，它会在原始文本旁边显示密码。但是我认为，如果所揭示的秘密与原始文本完全吻合，那就显得整洁了。理想情况下，我希望将机密文本显示在原始文本的上方。

很遗憾，popover configuration仅允许放置auto | top | bottom | left | right。

我想做的是：

标识弹出窗口的父项
识别弹出窗口中的秘密文本
计算其偏移量
相应地移动弹出窗口

这似乎比预期的难，我的弹出窗口根本没有动。要指定自定义偏移量，我使用的是此问题的代码：How can I get an object's absolute position on the page in Javascript?

完整的示例在这里：https://jsfiddle.net/owak40cz/10/

index.html：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body>
    <p>
    some text.
    </p>
    <p>
    another line of text.
    </p>
        <p>
            do you know what is
            <mark tabindex="0" type="button" data-toggle="popover" data-html="true" data-trigger="click" 
            style="background-color:rgb(0, 190, 0);"
            data-content="<div id=&quot;popover&quot;>
                <p id=&quot;popover-child&quot;> unhidden </p>
                <input type=&quot;button&quot; value=&quot;:)&quot;>
                <input type=&quot;button&quot; value=&quot;:(&quot;>
            </div>">
            hidden</mark> here?</p>
    </body>
</html>

main.js

$(function(){
    let el = $('[data-toggle="popover"]');
    el.attr("id", "popover-parent");
    el.popover();

    el.on("show.bs.popover", function(){
      let popover_pos = cumulativeOffset($("#popover-child"));
      let parent_pos = cumulativeOffset($("#popover-parent"));

      let left_diff = popover_pos.left - parent_pos.left;
      let top_diff = popover_pos.top - parent_pos.top;

      $(".popover.fade.right.in").css("left: -"+left_diff+"px!important; top: -"+top_diff+"px!important;")

    });
    //popovers.popover({container: "body"});
})

// taken from here: https://stackoverflow.com/questions/1480133/how-can-i-get-an-objects-absolute-position-on-the-page-in-javascript
var cumulativeOffset = function(element) {
  var top = 0, left = 0;
  do {
      top += element.offsetTop  || 0;
      left += element.offsetLeft || 0;
      element = element.offsetParent;
  } while(element);

  return {
      top: top,
      left: left
  };
};

bootstrap：将弹出框中的元素与页面上的元素对齐

0 个答案: