Home/ Questions/Q 7845209
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T17:09:11+00:00

Here’s the code <html> <head> <style> #container { border: 1px solid black; width: 100px;

  • 0

Here’s the code

    <html>
        <head>
            <style>
                #container {
                    border: 1px solid black;
                    width: 100px;
                    height: 20px;
                    margin: 0 auto;
                    text-align: center;
                }

                #fade {
                    display: none;
                    background: black;
                    opacity:0.4;
                    filter:alpha(opacity=50);
                    z-index: 1;
                    position: fixed; left: 0; top: 0;
                    width: 100%; height: 100%;
                }

                #window {
                    width: 200px;
                    height: 50px;
                    background: white;
                    position:absolute;
                    left:40%;
                    top:40%;
                    z-index: 2;
                    text-align: center;
                }
            </style>
            <script type="text/javascript" src='/libs/jquery/jquery.js'></script>
            <script>
                $(document).ready( function() {
                    $('#view').click( function() {
                        $('#fade').fadeIn();

                        var addWindow = "<div id='window'><h3>This is a popup window.</h3></div>"
                        $(addWindow).appendTo('body');
                    });

                    $('#fade').click( function() {
                        $('#fade, #window').fadeOut();
                    });
                });
            </script>
        </head>

        <body>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <div id="container">
                <a href="#" id="view">
                    View window
                </a>
            </div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <div id="fade"></div>
        </body>
    </html>

There’s a link after a long set of < br >, I did it on purpose just to say that my page is crowded with different objects and my link was in the middle of the page. What happened here is that, when you click ‘View window’, a div / window will come in, but my window always appear on top of the page. It will scroll all the way up and then my window will appear. I want my window to appear in the same position where I clicked the ‘View window’ link without scrolling all the way to the top. Is it possible? I think it’s just a matter of css, Please help! Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are two issues as I see it:

    1. Clicking the link takes you to the top of the page
    2. The popup position is set taken from it’s container

    1 is easy, prevent the default click event from firing

    2 you could fix by setting the top value dynamically on click so the popup was positioned according to the screen. OR you could use position fixed instead.

    I’ve setup an example here: http://jsfiddle.net/A2YjS/

    • 0