JQuery와 블록 요소

이 코드 작업 얻이 수없는 것 :JQuery와 블록 요소

는 내가 뭘하려고 오전 단지 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; 
}

어떤 문제가 될 수 있을까?

출처

2012-10-25 StealthRT

흥미로운 CSS. 제 생각 엔 당신이 JS를 다시 붙여 넣은 것 같아요. :) –

절대 위치에 배치 된 요소는 가장 가까운 위치에있는 부모 요소를 기준으로 배치됩니다.

이 문제를 해결하기 위해, 당신은 #overlay의 top:0이 left:0이 #footer의 왼쪽 상단 모서리를 참조 원인이되는, 바닥 글 요소는 위치 확인해야합니다.

#footer{ 
    position:relative; 
}

나는 added this to your fiddle 그래서 당신이 행동에 그것을 볼 수 있습니다했습니다.

출처

2012-10-25 20:53:29 Kelvin

마지막 질문과이 중 일부 코드를 취하면 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에서 그것을 추가하는 fiddle입니다.

출처

2012-10-25 21:26:41 vdbuilder

내 예제와 같이 자바 스크립트에 오버레이 html이있는 버전을 제공 할 수 있습니까? 오버레이 div를 이미 코드 내에서 사용하는 대신 현장에서 더 잘 만드는 것으로 보입니다. – StealthRT

@StealthRT 업데이트 된 바이올린에 대한 링크를 추가했습니다. 오버레이의 콘텐츠가 동적으로 생성되는 경우이 방법이 유용 할 것입니다. 그러나 오버레이의 내용이 정적 인 경우 첫 번째 방법이 더 좋습니다. – vdbuilder

** getElementById **, ** getComputedStyle **, ** style.top ** 등 대신 JQuery를 사용하여 JS를 작성할 수 있습니까? IE에서 여전히 제대로 작동하지 않습니다. – StealthRT

JQuery와 블록 요소

답변

관련 문제