0

似乎无法使此代码正常工作：

http://jsfiddle.net/fxBEg/13/

我想要做的只是将 ... 覆盖到名为“footer”的 DIV 区域上，但它似乎根本没有这样做？

JS代码：

$('#enableOverlay').live('click',function(event){
    var $overlay = $('<div id="overlay"><div id="overlayText"><img src="/img/sendingData.gif"><p class="overlaytxt1">Your data is being saved</p><p class="overlaytxt2">Please wait...</p></div></div>').prependTo('#footer');
    var $footer = $('#footer');
    var $enable = $('#enableOverlay');

    $enable.addClass('active');
    $overlay.fadeIn();
});

HTML 代码：

<link type="text/css" rel="stylesheet" href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700'>

<p>Curabitur vel nulla ac justo pharetra aliquet. Phasellus dictum porttitor metus, ut mattis eros sagittis sit amet. Aliquam bibendum velit vitae nisi porttitor sollicitudin. Proin pretium sapien eu lorem tempus convallis. In tincidunt erat quis neque dapibus id lobortis mauris placerat. Aliquam tellus sem, consequat ac faucibus ac, rhoncus eu nunc. Nulla pulvinar malesuada viverra.</p><p>In atat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus a.at turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus  Cat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus atat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus  tat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus urat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus piat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus s at turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus um sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur semper, neque ac placerat suscipit, dolor justo vulputate purus, at tristique sem nisl nec orci.</p>

<div id="footer" style="width: 150px; height: 250px;">
    <a id="enableOverlay" style="color: #39F;">CLICK TO Overlay</a>
    This is a normally placed footer somewhere in your html
    gdf
    gsdfgsdfg
    fgs
    dgf
    dgf
</div>

和 CSS：

#overlay {
display: none;
position: absolute;
top: 0;
height: 100%;
width: 100%;
background: white;
opacity: 0.9;
z-index: 20000;
}

#overlayText {
    text-align:center;
    padding-top: 150px;
    z-index:8001;
}

p.overlaytxt1 {
    line-height:70%;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 1.5em;
    line-height: 1.4;
    font-weight: bold;
    top: 5px;
    position:relative;
    color: #fff;
    background-color: #47c3d3;
    width: 240px;
    margin-left: 43%;
}

p.overlaytxt2 {
    line-height:70%;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 1.5em;
    line-height: 1.4;
    font-weight: bold;
    color: #fff;
    position:relative;
    background-color: #47c3d3;
    width: 140px;
    margin-left: 51%;
    top: -22px;
}

​</p>

可能是什么问题呢？

4

2 回答 2

1

绝对定位的元素相对于最近的定位父元素定位，在您的情况下是文档。

要解决您的问题，您需要定位页脚元素，这将导致#overlay' top:0，left:0参考#footer.

#footer{
    position:relative;
}

我已将此添加到您的小提琴中，以便您可以看到它的实际效果。

于 2012-10-25T20:53:29.780 回答
1

如果我们从上一个问题中获取一些代码，从这个问题中获取一些代码，我们会得到这个fiddle。我们使用纯 js 设置大小，这次还设置了叠加层的位置。这需要一个新功能：

function findPos(obj) {
    var curleft = curtop = 0;
    if(obj.offsetParent){
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}

​我们用它来确定页脚的位置。小提琴很短，可能不言自明。如果不在评论中发表，我会提供更多详细信息。

注意：这样做意味着无论您如何放置和/或调整页脚的大小，叠加层都会跟随它。这也将在所有主要浏览器上正常工作。

编辑：

这是一个小提琴，它可以像您在评论中要求的那样从 js 添加它。

于 2012-10-25T21:26:41.787 回答