A camada pop-up js está sempre centrada em ideias e códigos de implementação

Autor：Eve Cole Data da Última Atualização：2025-03-03 01:32:01

A janela pop-up está sempre centralizada

Copie o código do código da seguinte forma:

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

janela.onload=função(){

if(éIE){

janela.onscroll=doIE;

janela.onresize=doIE }

função doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var largura=document.documentElement.clientWidth;

var altura=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';

Primeiro de tudo, todos precisam entender um estilo CSS incompatível position:fixed;

O atributo Posição possui quatro valores opcionais: estático, absoluto, fixo e relativo.

Vamos aprender juntos seus diferentes usos. Durante o estudo, devemos pensar em qual deles deve ser usado em qual situação de layout.

position:static Sem posicionamento Este valor de atributo é o posicionamento padrão de todos os elementos. Em circunstâncias normais, não precisamos declará-lo especificamente, mas às vezes, ao encontrar herança, não queremos ver o impacto dos atributos herdados pelo elemento. . em si, então você pode usar position:static para cancelar a herança, ou seja, restaurar o valor padrão do posicionamento do elemento. Por exemplo: #nav { position:static } Os outros dois mencionados acima, estamos falando principalmente de posição fixa: fixa O que significa o valor do atributo de posicionamento em relação ao posicionamento fixo da janela? O elemento é posicionado de forma semelhante ao absoluto, mas o bloco que o contém é a própria janela de visualização. Em mídia de tela, como navegadores da Web, os elementos não se movem na visualização do navegador à medida que o documento é rolado. Por exemplo, permite layout de estilo de quadro. Em mídia de página, como impressões, um elemento fixo aparece na mesma posição na primeira página. Isso pode ser usado para gerar títulos ou notas de rodapé fluidos. Vimos efeitos semelhantes, mas a maioria deles não é obtida por meio de CSS, mas sim por meio de scripts JS. Observe que o IE6 não oferece suporte ...

Aqui usamos position:fixed; + "hack technology" + "javascript" para resolver este problema;

Copie o código do código da seguinte forma:

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

<cabeça>

<title>Engenheiro Front-end Tusheng</title>

corpo,div{margem:0;}

#a{largura:200px;altura:200px;fundo:azul;posição:fixa;esquerda:50%;topo:50%;margem esquerda:-100px;margem superior:-100px;_posição:absoluta;}

</ /estilo>

var isIE=window.XMLHttpRequest?false:true;

var aIsIE={};

janela.onload=função(){

if(éIE){

janela.onscroll=doIE;

janela.onresize=doIE }

função doIE(){

aIsIE.top=document.documentElement.scrollTop;

aIsIE.left=document.documentElement.scrollLeft;

var largura=document.documentElement.clientWidth;

var altura=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>

<corpo>

</corpo>

</html>