¿Cómo logra js el efecto de hacer clic en la capa emergente?

Generalmente, esta capa está oculta (mostrar: ninguna), y luego al hacer clic en la "imagen (o cualquier elemento de la página)" que mencionaste, muestre esta capa (Pantalla: bloque en línea/bloque) y establezca un fondo gris. Es como si esta capa flotara sobre la capa inferior.

El siguiente es el código de demostración:

lt! tipo de documento? html gt

lthtml gt

lthead gt

ltmeta? charset="utf-8 " > capa emergente lttitle gt - centro del navegador - oscurecimiento de fondo

ltstyle gt

* {margin: 0; padding: 0px}

Texto {relleno: 30px}

# mostrar { ancho: 300 px; alto: 200px visualización: ninguno; relleno: 1px; ¿sólido? # 4c 77 aa; fondo: # f2f 7 FD; índice z: 11; escala: }

#show? h3 {fondo: # 4c 77 aa; color: # ffffont-size: 14px; relleno: 5px}

#show? span{posición: absoluta; derecha: 3pxtop: 3px; pantalla: bloque; cursor: puntero; color: # fff peso de fuente: negrita;}

#show? p { relleno: 5px; }

# texto { tamaño de fuente: 12px; sangría de texto: 2em altura de línea: 20px}

# bgbox { posición: absoluta; arriba: 0; fondo: # 000; filtro: alfa (opacidad = 30); opacidad: 0.3; índice z: 10}

lt/style gt;

ltscript? type = " text/JavaScript " gt;

¿Función? mostrar(){

var? ¿Ancho? =?documento.elemento del documento.ancho del cliente;

var? iAltura? =?documento.elemento del documento.altura del cliente;

var? bgObj? =?document . createelement(" div ");

bgObj.setAttribute("id", "bgbox");

bgObj.style.width? =?Ancho “px”;

bgObj.style.height? = math . max(documento . cuerpo . altura del cliente,? iHeight) "px";

cuerpo del documento . ¿Osho? =?document . getelementbyid(' mostrar ');

oShow.style.display? =?bloque';

oShow.style.left? =?(I ancho-302)/2 "px";

oShow.style.top? =?(ih altura-202)/2 “px”;

¿Función? oClose(){

oShow.style.display? =?"Ninguno";

documento. cuerpo. eliminar niño(bgObj);

}

var? ¿Cerrar? =?documento.crearelemento("

span ");

oClosebtn.innerHTML?=?"×";

SO cómo . appendchild(oClosebtn);

oClosebtn.onclick?=?oClose

bgObj.onclick? =?oClose

}

lt/script gt

lt/head gt

ltbody gt

ltAnswer? onclick = "mostrar();? ¿devolver? Fake"? href = " # " gtPor favor, golpéame fuerte (rebotaré hacia el medio y el fondo se oscurecerá)