Question

我一直试图在滚动div容器内创建一个带有最小js的弹出窗口。溢出滚动是不可避免的。寻找一些帮助，使弹出窗口找到父级的位置，位置：固定。（这应该是绝对的）

这里是HTML代码，此代码位于Overflow：Scroll容器中。

    <span class="popover-wrapper right">
      <a href="#" data-role="popover" data-target="detailpop">...</a>
      <div class="popover-modal detailpop">
      <div class="popover-header"><%= item.name %>
      <a href="#" data-toggle-role="close" style="float: right">×</a>
      </div>
      <div class="popover-body">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium eget enim et iaculis. Pellentesque dapibus id metus sit amet ultrices.</p>
</div>

这里是popover的CSS

.popover-modal{-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);
box-shadow:0 6px 12px rgba(0,0,0,.175);
-webkit-transition:all 240ms cubic-bezier(.34,1.61,.7,1);
-o-transition:all 240ms cubic-bezier(.34,1.61,.7,1);
transition:all 240ms cubic-bezier(.34,1.61,.7,1);
-webkit-transform:scale(0);
transform:scale(0);
transform-origin:29px -10px;
opacity:0;
position:absolute;
z-index:1000;
width:300px;
margin-top:8px;
border-radius:4px;
border:1px solid #aab2bd;
background-color:#fff}

如何根据屏幕上的点击来定位弹出窗口。

Answer 1

找到解决方案，这可能会有所帮助。

$(document).ready(function(){
$('a.d').bind('click', function (event) {
$('.popover-modal').css('left',event.pageX);      // <<< use pageX and pageY
$('.popover-modal').css('top',event.pageY);      // <<< also make it absolute!
});
});

将此添加到inpage脚本可以跟踪位置并将其放置。感谢投票给这个问题的人。被迫自己解决这个问题。

Answer 2

您可以尝试将弹出窗口放在可滚动div的同一级别，并将它们放在容器中。然后你可以将弹出窗口绝对定位到容器，可滚动的div将是with和height

的100％

将弹出窗口放在滚动溢出div

2 个答案: