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

and jQ:


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 resize animated gif with HTML/CSS?

    How to add CSS to ASP.NET site with WebOptimization and Bundling

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?

    Css how to set 3 block block/div's in one line [closed]

    How to calculate padding-top in % of the given div relative to its parent div

    How to give 2 different Hyperlinks in css different colors

    How to organize html and css to do this UI design with responsive design

    How to delay Hide/Show events until Iframe loads after a submit

    gwt - How to CSS reset a GWT app?

    How to make this css code (counters and ;before) cross browser compatible using jquery?

    How to overlay a form field over an image with a fixed width?

    How do I add a hover to this css class for a tr?

    How to switch between custom css layout and bootstrap css layout

    Best practice: how to name css default state? [closed]

    How to increase constant space between li inline-block list elemets?

    How to put background after anchor tag throw css?

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    How can I force the download of unused CSS images?

    How do I make the HTML Slider with CSS stay in the box?

    How do I make these buttons stay activated after clicking on them?

    Sencha Touch 2 date picker component & css: how to display hidden column names?

    how does CSS determine which way to animate a transition?

    How to add element to existing css class [closed]

    How to have img popout when containing div is clicked (Image gallery)?

    Wordpress Plugin - How can I make the text responsive, OR replace it with a new div?

    CSS - How to set many div width with a non-round percentage to fill a parent div space

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery

    How does Gmail prevent overlap for elements that use absolute positioning?

    How to have multiple borders on div using css

    How to apply custom css to split post into multiple page