Node.js 팝업 레이어는 항상 구현 아이디어와 code_javascript 기술 중심입니다.

팝업 레이어 창은 항상 중앙에 위치합니다

코드 복사 코드는 다음과 같습니다.

학습 중에 어떤 레이아웃 상황에서 사용해야 하는지 함께 생각해 보세요.

position:static No positioning 이 속성 값은 모든 요소의 기본 위치 지정입니다. 일반적인 상황에서는 이를 구체적으로 선언할 필요가 없지만 때로는 상속 상황이 발생하여 이를 보고 싶지 않습니다. 요소에 의해 상속된 속성은 자체적으로 영향을 미치므로 position:static을 사용하여 상속을 취소할 수 있습니다. 즉, 요소 ​​위치 지정의 기본값을 복원할 수 있습니다. 예: #nav { position:static; } 앞에서 언급한 다른 두 가지는 주로 고정 위치: 고정에 대해 설명합니다. 창의 고정 위치에 상대적인 위치 지정 속성 값은 무엇을 의미합니까? 요소는 절대값과 유사하게 위치하지만 포함 블록은 뷰포트 자체입니다. 웹 브라우저와 같은 화면 미디어에서는 문서가 스크롤될 때 요소가 브라우저 보기에서 이동하지 않습니다. 예를 들어 프레임 스타일 레이아웃을 허용합니다. 인쇄물과 같은 페이지 미디어에서는 고정된 요소가 첫 번째 페이지의 동일한 위치에 나타납니다. 이는 흐르는 제목이나 각주를 생성하는 데 사용할 수 있습니다. 비슷한 효과를 보았지만 대부분은 CSS를 통해서가 아니라 JS 스크립트를 사용하여 달성되었습니다. IE6은 지원하지 않는다는 점에 특히 주의하세요...

여기서는 이 문제를 해결하기 위해 "hack technology"와 "javascript"를 결합하여 사용합니다.





코드 복사

코드는 다음과 같습니다.

图胜前端工程师

body,div{margin:0; 패딩:0;}
#a{너비:200px;높이:200px;배경:파랑;위치:고정;왼쪽:50%;상단:50%;여백-왼쪽:-100px;여백-상단:-100px ;_위치:절대;}


var isIE=window.XMLHttpRequest?false:true;
var aIsIE={};
window.onload=function(){
if(isIE){
window.onscroll=doIE;
window.onresize=doIE; }
함수 doIE(){
aIsIE.top=document.documentElement.scrollTop;
aIsIE.left=document.documentElement.scrollLeft;
var width=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;
var oDiv=document.getElementById("a");
oDiv.style.top=aIsIE.top(height-oDiv.offsetHeight)/2 'px';
oDiv.style.left=aIsIE.left(width-oDiv.offsetWidth)/2 'px';