0

这是代码

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

放了很长的<br>之后有一个链接，我是故意的，就是说我的页面挤满了不同的对象，我的链接在页面的中间。这里发生的是，当您单击“查看窗口”时，会出现一个 div / 窗口，但我的窗口始终出现在页面顶部。它会一直向上滚动，然后我的窗口就会出现。我希望我的窗口出现在我单击“查看窗口”链接的同一位置，而无需一直滚动到顶部。是否可以？我认为这只是css的问题，请帮助！谢谢。

4

3 回答 3

1

在我看来有两个问题：

  1. 单击链接将带您到页面顶部
  2. 弹出位置设置取自它的容器

1很简单，防止触发默认点击事件

2 您可以通过在单击时动态设置顶部值来修复，以便弹出窗口根据屏幕定位。或者您可以改用固定位置。

我在这里设置了一个示例：http: //jsfiddle.net/A2YjS/

于 2012-04-20T08:56:37.527 回答
1

将您的代码更改为以下代码

           #window {
                width: 200px;
                height: 50px;
                background: white;
                position:absolute;
                left:40%;
                z-index: 2;
                text-align: center;
            }


        <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');

                    $('#window').css("top", ($('#view').offset().top) + "px");
                });

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


        <div id="container">
            <div id="view">
                View window
            </div>
        </div>
于 2012-04-20T12:09:00.690 回答
0

是的，你必须做类似 sp00m 所写的事情。

就这样你知道，

top 和 left 应该是 50%，margin left 和 margin top 应该分别是宽度和高度的一半。这用于将弹出 div 准确地居中到中心。

于 2012-04-20T11:17:17.620 回答