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

私が見ているように、2つの問題があります。

  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 が書いたようなことをしなければなりません..

ご存知のように、

上と左は 50% で、左マージンと上マージンはそれぞれ幅と高さの半分である必要があります。これは、ポップアップ div を正確に中央に配置するために使用されます。

于 2012-04-20T11:17:17.620 に答える