JQuery的块元素

Question

似乎无法获得此代码工作：

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

什么，我试图做的就是以贴...叠加到指定的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; 
} 

可能是什么问题呢？

Answer 1

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

解决你的问题，你需要使脚部构件定位，这将导致#overlay的top:0，left:0指的#footer左上方的角落。

#footer{ 
    position:relative; 
} 

我已经added this to your fiddle所以你可以看到它的行动。

Answer 2

如果我们从最后一个问题和一些代码中拿出一些代码，我们得到这个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]; 
} 

我们用它来揣摩出页脚是。小提琴的短小，可能是自我解释。如果没有发表评论，我会给更多的细节。

注意： 这样做意味着无论您如何放置和/或设置页脚的大小，覆盖图都会沿用它。此外，这将适用于所有主流浏览器。

编辑：

这里有一个fiddle，增加了它的js像你问的意见。