0

私は 1 つの固定 div を持っており、それは css を使用してページに配置されています。動的に生成され、ページの中央にあるフォームと位置に追加される別の div があります。この div は、ドキュメントでクリックが発生したときに追加されます。

問題は、ドキュメントをクリックすると、divがページに動的に追加され、適切に配置されますが、静的なdivの位置が変更されることです。なぜそれが起こるのか理解できません。 ここに私のコードがあります

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $(document).click(function (e) {
                // Check for left button click
                if (e.button == 0) {
                    $('form').append('<div id="dvfloat" class="float_div">Welcome</div>').center().fadeIn('slow');
                }
            });

            jQuery.fn.center = function () {
                this.css("position", "absolute");
                this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
                                                $(window).scrollTop()) + "px");
                this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
                                                $(window).scrollLeft()) + "px");
                return this;
            }
        });
    </script>
<style type="text/css">
.login_div {
    background-color: Yellow;
    margin-left: 50px;
    position: absolute;
    width: 100px;
}
.float_div {
    background-color: Green;
    width: 100px;
    height:50px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
    <div id="static_dv" class="login_div"> hi how r u ? </div>
</form>
</body>
</html>

私のコードを実行して効果を確認してください。ドキュメントをクリックすると、「static_dv」と呼ばれる静的 div が再配置されますが、そのためのコードは記述しませんでした。静的 div の位置を変更する必要があります。何が修正されますか。ありがとう

4

3 に答える 3

1

フォーム内のdiv、js内の位置FORMを変更したため、すべてのコンテンツも変更されました

これを試して

 var div = $('<div id="dvfloat" class="float_div">Welcome</div>');
 $('FORM').append(div)
 div.center().fadeIn('slow');

divの位置を設定する必要がありますが、（$ TAG）.append（$ someTag）の解釈-$ TAGを返すため、中央の位置を$TAGに設定します。

于 2012-09-26T18:30:46.047 に答える
1

実際には、新しく作成された DIV を中央に配置するのではなく、フォーム全体を次の小さな変更で試してください。

$('form').append('<div id="dvfloat" class="float_div">Welcome</div>').fadeIn('slow');
$('#dvfloat').center();
于 2012-09-26T18:34:54.010 に答える
0

このコードを使用する「this」はフォームを指し、フォームの位置を変更しているため、機能していません。代わりにdivを参照する以下の新しいコードを使用してください

$(document).ready(function() {
    $(document).click(function(e) {
        // Check for left button click
        if (e.button == 0) {
            $('form').append('<div id="dvfloat" class="float_div">Welcome</div>').center().fadeIn('slow');
        }
    });

    jQuery.fn.center = function() {
        this.find('.float_div').css("position", "absolute");
        this.find('.float_div').css("top", Math.max(0, (($(window).height() - this.find('.float_div').outerHeight()) / 2) + $(window).scrollTop()) + "px");
        this.find('.float_div').css("left", Math.max(0, (($(window).width() - this.find('.float_div').outerWidth()) / 2) + $(window).scrollLeft()) + "px");
        return this;
    }
});​
于 2012-09-26T18:30:47.647 に答える