전체 페이지 반투명 오버레이 div 위에 이미지 CSS를 제어하는 ​​방법

Question

로드시 내 페이지를 덮는 전체 페이지 오버레이가 있습니다. 내가 첨부 한 유일한 스크립트는 클릭 한 것이 있으면 그것을 닫는 것입니다. 이 오버레이의 목적은 페이지를 설명하는 것이므로 페이지의 다른 영역에 앵커 할 투명 .png 이미지가 있습니다.

아래 예제처럼 전체 불투명도가 있고 페이지의 왼쪽 상단 모서리에서 약간의 간격을두고 싶습니다. 그러나로드 할 때 .4 투명도로 설정되고 걸려 넘어졌습니다. 왼쪽 상단 구석에 나는 CSS 전문가가 아니며 나는 이것으로 내 바퀴를 돌리고있다. 누구든지 도와 줄 수 있습니까?

<script language="javascript" type="text/javascript"> 

    $(function() { 

     var docHeight = $(document).height(); 

     $("body").append("<div id='overlay'><div id='home_text'><img src='/images/overlay_test_home.png'></div></div>"); 

     $("#overlay") 
     .height(docHeight) 
     .css({ 
      'opacity': 0.4, 
      'position': 'absolute', 
      'top': 0, 
      'left': 0, 
      'background-color': 'black', 
      'width': '100%', 
      'z-index': 5000 
     }); 

     $("#home_text") 
     .css({ 
      'opacity': 1.0, 
      'top' : 20, 
      'left': 200 
     }); 

     $('#overlay').click(function() { 
      $("#overlay").hide(); 
     }); 

    }); 

</script> 

Answer 1

자바 스크립트에서 모든 html과 CSS를 제거하면 관리가 더욱 쉬워집니다. 오버레이에

#overlay { 
    background: rgba(0, 0, 0, .4); 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 10; 
} 

#home_text { 
    background: red; 
    height: 300px; 
    margin: 20px auto 0; 
    width: 300px; 
} 

불투명도가 내부의 모든 내용에 영향을 받기 때문에 내가 RGBA에 불투명도를 변경 :

은 여기 CSS입니다. Rgba는 모든 브라우저에서 지원되지 않으므로 대체 PNG를 사용할 수 있습니다. Modernizr은 지원 확인에 유용합니다. 또한 오버레이의 높이 설정을 제거하고 왼쪽 오른쪽 하단과 왼쪽을 0으로 설정합니다. 원하는대로 home_text 위치를 변경할 수 있습니다. 어떻게 표시해야하는지 확실하지 않아 빨간색 상자로 만들었습니다.

$(function() { 
    var $overlay = $('#overlay'); 
    $overlay.on('click', function (e) { 
     $overlay 
      .hide() 
      .off(); 
    }); 
}); 

오프 방법은 해당 이벤트를 제거합니다

여기

<div id="overlay"> 
    <div id="home_text"> 
     <!-- your image --> 
    </div> 
</div> 

당신이 JS를 정리하다 :

는 여기에 귀하의 HTML입니다.

이의 예는 여기에서 볼 수있다 : http://jsfiddle.net/SHBXd/1/

Answer 2

당신이 JQueryUI 모달 팝업을 사용하는 방법에 대한 생각 했습니까? 제목을 숨기고 원하는대로 사용자 정의 할 수 있습니다. http://jqueryui.com/dialog/