How to make pop up div locked to the page coordinates in jQuery


Tags: jquery,html,css,popup

Problem :

On Stack Overflow page, most pop up divs are "glued" to current page coordinates, so if you scroll the screen up/down, popup window remain glued to the clicked element. How can I achive that?

What I have currently is than when I click on the button, popup appears, but when I scroll the page up/down, element remains glued to the window screen, and not page coordinates. How can I get it to work Stack Overflow way, so the pop up div will be glued to page coordinates?

My current code for that element is

$(".userinfo").offset({ top: position.top + 60, left: position.left});

css position of the div is obviously absolute



Solution :

Sounds like you append your popup div to the main html window, hence it behaves like position:fixed. If you want your popup to be, as you said, 'glued' to the button position, you need to append it within your <div class="button"> (or whatever you are having) element.

<div class="main-container">
    <div class="button">
        <div class="userinfo></div> // Here's where you need to put your '.userinfo' class in
    </div>
</div>

and jQ:

$('.userinfo-main').appendTo('div.button');

This will make it positioned within your <div class="button"> and therefore 'glued' to it's coordinates, not to main screen.

Hope it helps.


    CSS Howto..

    How to play a video inside a logo

    How to get different height html divs to float up

    How do I fix the navigation menu in Firefox and Internet Explorer?

    CSS How to hide current child menu items when hovering over parent's sibling items without javascript

    How can I position two divs on the same line and have them act responsive?

    How to make fixed navbar top like w3school

    How to make links one link per line, only in the footer via css?

    How to use Auto compiler for less and sass in visual studio

    Making breadcrumbs… not as easy as literally making breadcrumbs, how can I get text to be inside?

    How can I add an image to a
  • tag dynamically
  • How to stretch individual background images in CSS

    How do I move this label inside my textarea?

    How can I get Chrome to resize this div when the padding changes?

    How can I customize the CSS generated by LESS to include Font Awesome?

    How to keep css content position when zooming in and out?

    How to add slide animation when showing elements

    How do you create a transparent overlay with text upon mouse hover?

    How to move last li to right most side CSS

    How do I get this div to cover flash control (jw player)?

    How to get a different link color on my tumblr static page then my main (front page?)

    How to obtain non-uniformly scrolling elements and layered “curtain-like” backgrounds on a webpage?

    How to apply default CSS styling to all HTML pages

    How to get the content of the bottom element of a flexbox to be 100% height its container

    How to customize the EditorFor CSS with razor

    How to get all CSS of element

    How can I apply jQuery .css style to descendant div [closed]

    How do I push inline elements onto the next line

    How to have an image overlap the edge of a div

    How to not inherit CSS styles from parents? [duplicate]

    CSS background color show another color