Node.js 팝업 레이어는 항상 중앙에 구현 아이디어와 코드가 있습니다.

저자：Eve Cole 업데이트 시간：2025-03-03 01:32:01

팝업창은 항상 중앙에 위치

다음과 같이 코드 코드를 복사합니다.

<스크립트 유형="텍스트/자바스크립트">

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

window.onload=함수(){

if(isIE){

window.onscroll=doIE;

window.onresize=doIE }

함수 doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var 너비=document.documentElement.clientWidth;

var 높이=document.documentElement.clientHeight;

var oDiv=document.getElementById("oneReply");

oDiv.style.top=aIsIE.top+(height-oDiv.offsetHeight)/2+'px';

oDiv.style.left=aIsIE.left+(width-oDiv.offsetWidth)/2+'px' </script>

우선, 모두가 호환되지 않는 CSS 스타일 위치:고정을 이해해야 합니다.

Position 속성에는 정적, 절대, 고정, 상대의 네 가지 선택적 값이 있습니다.

서로 다른 용도를 함께 배워봅시다. 연구하는 동안 어떤 레이아웃 상황에서 사용해야 하는지 생각해 보아야 합니다.

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

여기서는 이 문제를 해결하기 위해 position:fixed; + "hack technology" + "javascript"를 사용합니다.

다음과 같이 코드 코드를 복사합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/1999/xhtml/TR/xhtml/DTD/xhtml1-transitional.dtd">

< html xmlns="http://www.w3.org/1999/xhtml">

<머리>

< 메타 http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Tusheng 프론트엔드 엔지니어</title>

< 스타일 유형="텍스트/css">

몸체,div{여백:0;}

#a{너비:200px;높이:200px;배경:파란색;위치:고정;왼쪽:50%;상단:50%;여백-왼쪽:-100px;여백-상단:-100px;_위치:절대;}

</ /스타일>

<스크립트 유형="텍스트/자바스크립트">

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

window.onload=함수(){

if(isIE){

window.onscroll=doIE;

window.onresize=doIE }

함수 doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var 너비=document.documentElement.clientWidth;

var 높이=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';< /script>

</head>

<본문>

< /본문>

< /html>