페이지의 볼 수있는 영역 중간에 반투명 배경이있는 js 대화 상자를 배치하는 방법은 무엇입니까?

Question

페이지가 테이블 항목의 증가로 인해 길어 지므로 단추를 클릭하여 대화 상자를 열면 페이지 상단에 표시되고 맨 위로 스크롤해야 볼 수 있습니다. 나는 그것이 페이지에있을 때마다 뷰 포트의 중간에 나타나길 원합니다.

html 마크 업을 작성한 다음 responseText를 div 요소에 추가하기 위해 PHP 페이지에 대한 ajax 요청을 작성합니다.

배경뿐 아니라 오버레이됩니다 대화 상자에 대한 CSS 코드는 다음과 같습니다

<script type='text/javascript'> 
div.Background { 
background: #FFF; 
position:absolute; 
top:0px; 
left:0px; 
width:100%; 
height:100%; 
filter:alpha(opacity=28); 
-moz-opacity: 0.8; 
opacity: 0.8; 
z-index:999; 
} 
    div.Box { 
border:1px solid #bbb; 
background:white; 
position:absolute; 
left:50%; 
top:50%; 
margin-left:-280px; 
margin-top:-195px; 
width:500px; 
height:420px; 
z-index:1000; 
-moz-box-shadow: 1px 3px 3px #ccc; 
    -webkit-box-shadow: 1px 3px 3px #ccc; 
    box-shadow: 1px 3px 3px #ccc; 
} 

</script> 

또한 내가 아무 소용이 절대 상자의 위치를 ​​유지 상대에 배경 위치를 변경 한 점에 유의하시기 바랍니다 jquery 또는 비슷한 물건을 사용하고 싶지 않습니다. 그래서 제발 그 해결책을 제안하지 요청하시기 바랍니다. 그냥 들으니 .. 얘들 아 .. 미리 감사드립니다.

Answer 1

먼저주의해야 할 점은 스크립트 태그 내에 CSS 규칙이 있다는 것입니다. 이는 틀린 것입니다. 그들은 즉, 스타일 태그 내에 있어야한다 : 당신의 질문에 대한 지금

<style type="text/css"> 
    /*CSS rules here */ 
</style> 

: 대신 요소 position:absolute을주는, position:fixed에 그 변경합니다. 이렇게하면 창에 상대적인 상자 의 위치를 ​​지정할 수 있으며 나머지 페이지를 위아래로 스크롤해도 동일한 위치에 유지됩니다. jsfiddle의 간단한 예를 참조하십시오.

주목할 점은 IE6은 position:fixed을 인식하지 못한다는 것입니다.