CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Beginner
Beginner

Reputation: 225

Position a popup inside a scroll overflow div

I have been trying to make a popup with minimal js inside the scroll div container. Overflow scroll is inevitable. Looking for some help in placing the popup finding the position of the parent, with position: fixed. (Which was supposed to be absolute)

Here goes the HTML Code, This code is inside a Overflow:Scroll container.

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

Here goes the CSS for the popover

.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}

How to position the popover based on the click on the screen.

Upvotes: 1

Views: 1900

Answers (2)

Beginner
Beginner

Reputation: 225

Found a solution, this could be helpful.

$(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!
});
});

Adding this to inpage script can track the position and place it their. Thanks for the person who downvoted the question. Forced to fix this myself.

Upvotes: 2

Abraham Murciano Benzadon
Abraham Murciano Benzadon

Reputation: 1643

You can try to put the popup at the same level the scrollable div, and put both inside a container. Then you can position the popup absolutely to the container, and the scrollable div will be 100% of with and height

Upvotes: 0

Related Questions