0

我有一个固定的 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 回答