js + css implementa la capa emergente enmascarada en el centro (desplazándose con la barra de desplazamiento de la ventana del navegador)

js + css implementa la capa emergente enmascarada en el centro (desplazándose con la barra de desplazamiento de la ventana del navegador)

Copie el código de código de la siguiente manera:

<!tipo de documento html>

<cabeza>

<meta juego de caracteres="utf-8" />

<título></título>

<tipo de estilo="texto/css">

*{}{margin:0;relleno:0;}

html{}{_background:url(about:blank);} /**//* Evite el flasheo en IE6, reemplace archivos vacíos con about:blank, reduzca las solicitudes*/

cuerpo{}{fondo:#fff; fuente: 12px/1.5 Tahoma,Ginebra, //5b8b//4f53, sans-serif;

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

p{}{font-size:14px;text-align:center;line-height:24px;}

/**//** Capa de máscara**/

#capamáscaras{}{

fondo:#000;

pantalla: ninguna;

filtro:alfa(opacidad = 50);

opacidad: 0,5;

arriba: 0;

izquierda: 0;

altura: 100%;

ancho: 100%;

índice z: 999;

posición: fija;

_posición:absoluta;

_left: expresión(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);

_top: expresión(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);

}

/**//** Capa emergente**/

#ventana emergente{}{

pantalla: ninguna;

ancho: 300 px;

índice z: 1000;

izquierda: 50%;

arriba: 50%;

posición:fija!importante;

margen izquierdo: -150px! Importante;

_posición:absoluta;

_top:expresión(eval(document.compatMode && document.compatMode=='CSS1Compat')?

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

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

}

.content{}{fondo:#f3f3f3;borde:1px sólido #999;}

.content h3{}{fondo:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px; padding-left:5px;}

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

</estilo>

</cabeza>

<cuerpo>

<div>

<p>

Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal

<br />

Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal

<br />

Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal

<br />

Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal

<br />

Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal Soy el texto principal

</p>

<tipo de entrada="botón" id="clickbtn" valor="haz clic en me gusta" />

</div>

<div id="capa de máscara"></div>

<div id="ventana emergente">

<div>

<h3> ¿Está centrada la capa emergente? </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>

<tipo de script="texto/javascript">

(función (capa de máscara) {

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

clickbtn.onclick = función(){

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

masklayer.style.display='bloque';

popup.style.display ='bloque';

var h = popup.clientHeight;

con(popup.estilo){

margenTop = -h/2+'px';

}

}

})(document.getElementById('capa de máscara'))

</script>

</cuerpo>

</html>