Question

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

我想要做的只是将...叠加层叠到名为“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 code：

<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的{{1}}，top:0引用{{1}的左上角}}

left:0

我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中添加它。

JQuery块元素

2 个答案: