• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

JQuery的块元素

jquery 来源:StealthRT 3次浏览

似乎无法获得此代码工作:JQuery的块元素

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; 
} 

可能是什么问题呢?


===========解决方案如下:

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

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

#footer{ 
    position:relative; 
} 

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


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)