js+css realiza a camada pop-up mascarada no centro (rolando com a barra de rolagem da janela do navegador)

js+css realiza a camada pop-up mascarada no centro (rolando com a barra de rolagem da janela do navegador)

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

<!doctypehtml>

<cabeça>

<meta charset="utf-8" />

<título></título>

<style type="texto/css">

*{}{margem:0;preenchimento:0;}

html{}{_background:url(about:blank);} /**//* Evita flashing no IE6, substitui arquivos vazios por about:blank, reduz solicitações*/

corpo{}{fundo:#fff; fonte: 12px/1.5 Tahoma,Genebra, //5b8b//4f53, sans-serif height:100%;}

.wrap{}{altura:980px; padding-top:20px;text-align:center;}

p{}{tamanho da fonte:14px;alinhamento de texto:centro;altura da linha:24px;}

/**//** Camada de máscara**/

#masklayer{}{

plano de fundo:#000;

exibição: nenhum;

filtro:alfa(opacidade = 50);

opacidade:0,5;

topo:0;

esquerda:0;

altura:100%;

largura:100%;

índice z:999;

posição: fixa;

_posição:absoluta;

_esquerda: expressão(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);

_top: expressão(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);

}

/**//** Camada pop-up**/

#Aparecer{}{

exibição: nenhum;

largura:300px;

índice z:1000;

esquerda:50%;

superior:50%;

posição:fixo!importante;

margem esquerda: -150px !importante;

_posição:absoluta;

_top:expressão(eval(document.compatMode && document.compatMode=='CSS1Compat')?

documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/

document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);

}

.content{}{background:#f3f3f3;border:1px sólido #999;}

.content h3{}{fundo:#a0a0a0;cor:#fff;tamanho da fonte:14px;altura:32px;altura da linha:32px;

#clickbtn{}{margin-top:20px;}

</estilo>

</head>

<corpo>

<div>

<p>

Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal

<br />

Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal

<br />

Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal

<br />

Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal

<br />

Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal Eu sou o texto principal

</p>

<input type="button" id="clickbtn" value="clike me" />

</div>

<div id="masklayer"></div>

<div id="pop-up">

<div>

<h3> A camada pop-up está centralizada? </h3>

<p>Centro, centro, centro, centro, centro, centro</p>

<p>Centro, centro, centro, centro, centro</p>

<p>Centro, centro, centro, centro</p>

<p>Centro, centro, centro</p>

</div>

</div>

<script type="texto/javascript">

(função(camada de máscara){

var clickbtn = document.getElementById('clickbtn');

cliquebtn.onclick=função(){

var popup = document.getElementById('popup');

masklayer.style.display='bloquear';

popup.style.display ='bloquear';

var h = popup.clientHeight;

com(popup.style){

margemTop = -h/2+'px';

}

}

})(document.getElementById('masklayer'))

</script>

</body>

</html>