1

我编写了一个例程，它将动态创建一个 div 并覆盖另一个 div。我的代码可以正常工作，但我正在尝试做的事情并没有变得完美。我认为我的代码中存在逻辑或 css 相关问题。所以在这里我给我的代码请通过，如果可能的话，请纠正它。

我的 html

<div id="box-outer">
    <div id="data-box">
        This is your data.
    </div>
 </div>
 <asp:Button ID="blinddwn" runat="server" Text="BLIND-2-DOWN" />

我的 CSS

 #box-outer
    {
        overflow: hidden;
        height: 200px;
        width: 200px;
        margin: 20px;
        padding: 10px;
        background-color:Green;
    }

我的 Jquery 例程

 $(document).ready(function () {
        jQuery.fn.exists = function () { return this.length > 0; }

        jQuery.fn.blindToggle = function (speed, easing, callback) {
            var oDiv;
            var margin_top = this.outerHeight() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));

            if ($("#BlindBox").exists() == false) {
                var _height = this.outerHeight();
                var _width = this.outerWidth();

                oDiv = $("<div id='BlindBox'></div>");
                oDiv.css("height", _height + 'px');
                oDiv.css("width", _width + 'px');
                oDiv.css("margin-top", ('-' + margin_top + 'px'));
                oDiv.css("padding", "10px");
                oDiv.css("background", "#e459e9");
                oDiv.css("position", "relative");
                oDiv.css("display", "none");
                this.append(oDiv);
            }
            else {
                oDiv = $('#BlindBox');
            }


            if (parseInt(oDiv.css('marginTop')) < 0) {
                oDiv.css('display', 'none');
            }

            return oDiv.animate({ opacity: 'toggle',
                marginTop: parseInt(oDiv.css('marginTop')) < 0 ? 0 : ('-' + margin_top + 'px')
            }, speed, easing, callback);

        };
    });

        $(document).ready(function () {
            $('#blinddwn').click(function () {
                $('#box-outer').blindToggle('slow');
                return false;
            });
        });

如果有人运行代码，那么他/她会看到 BlindBox div 没有正确覆盖我的另一个名为 box-outer 的 div。请看看我的例程并告诉我有什么问题。如果可能，纠正它

在这里，我给出了另一个 url 链接http://jsfiddle.net/tridip/YdnLd/8/只需单击此处，您将看到我试图通过代码完全实现的效果。我想通过我的代码来实现同样的效果。所以请告诉我我的代码有什么问题。谢谢

4

0 回答 0