La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html>
<Evista>
<title> nuevo documento </title>
<meta charset = "utf-8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<Meta name = "autor" content = "">
<Meta name = "Keywords" content = "">
<Meta name = "descripción" content = "">
<style type = "text/css">
*
{
relleno: 0px;
margen: 0px;
}
#Idiv
{
Ancho: 900px;
Altura: Auto;
Posición: Absoluto;
Índice Z: 1000;
borde: 2px sólido #ffffff;
Antecedentes: #ffffff;
}
</style>
</ablo>
<Body>
<div id = "idiv" style = "Display: None;">
<a href = "javaScript: void (0)" onClick = "cerrado ()"> Haga clic para cerrar la capa </a>
<br/> Diferencias en document.documentelement <br/> Diferencias en document.documentelement
</div>
<div> <a href = "javascript: void (0)" id = "show" onClick = "show ()"> ¡Haga clic para abrir la capa emergente! </div>
</body>
<script langue = "javaScript">
función show ()
{
var idiv = document.getElementById ("idiv");
Idiv.style.display = "bloque";
// Las siguientes partes deben centrarse para mostrar la capa emergente
Idiv.style.left = (document.documentelement.clientwidth-idiv.clientwidth) /2+document.documentelement.scrollleft+ "px";
//alert(document.body.scrolltop)
var aa_scrolltop = document.documentelement.scrolltop || Window.PageyOffset || document.body.scrolltop;
Idiv.style.top = (document.documentelement.clientheight-idiv.clientHeight)/2+aa_scrolltop+"px";
// Hay un problema aquí. La capa emergente se centra a la izquierda y a la derecha, pero la altura no está centrada, y se muestra en la parte superior, lo que hace que una // parte sea invisible. Entonces, agregue temporalmente el margen a continuación.
// Las siguientes partes hacen que la página completa se haga con grises
var procBG = document.createElement ("div"); // crear un div primero
procBG.SetAttribute ("id", "mybg"); // Defina la identificación del div
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "fijo";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alfa (opacidad = 70)";
// Cancelar barra de desplazamiento
document.body.appendChild (PROCBG);
document.body.style.overflow = "auto";
// Las siguientes partes se dan cuenta del efecto de arrastre de la capa emergente (si desea mover el DIV en la capa emergente, simplemente cierre la sesión y elimine lo siguiente)
/*
var posx;
var Posy;
Idiv.onmousedown = function (e)
{
if (! e) e = window.event; //ES DECIR
posx = e.clientx - parseInt (idiv.style.left);
posy = e.clienty - parseint (idiv.style.top);
documento.onmousemove = mouseMove;
}
document.onmouseUp = function ()
{
document.onmouseMove = null;
}
función mouseMove (EV)
{
if (ev == null) ev = window.event; // es decir
Idiv.style.left = (ev.clientx - posx) +"px";
Idiv.style.top = (ev.clienty - posy) +"px";
}*/
}
función cerrada () // Cierre la capa emergente
{
var idiv = document.getElementById ("idiv");
var mybg = document.getElementById ("mybg");
document.body.removechild (mybg);
Idiv.style.display = "Ninguno";
document.body.style.overflow = "Auto"; // Restaurar Page Scrollbar
//document.getelementByid("Mybg").style.display="none ";
}
</script>
</Html>
// Cambie la capa emergente anterior y haga su propia función de carga. Determine si la página ha sido cargada y oculta la carga.gif después de la finalización
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> nuevo documento </title>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
</ablo>
<Body onload = "subsomthing ()">
</body>
<script type = "text/eCMAScript">
función show (directionImg, img_w, img_h) {
// Obtener la altura de la página
var h = (document.documentelement.clientHeight> document.documentelement.clientHeight)? document.documentelement.scrollheight: document.documentelement.clientheight;
// Obtener ancho de página
var w = (document.documentelement.scrollwidth> document.documentelement.clientwidth)? document.documentelement.scrollwidth: document.documentelement.scrollwidth;
var procBG = document.createElement ("div"); // crear un div primero
procBG.SetAttribute ("id", "mybg"); // Defina la identificación del div
procbg.style.background = "#555";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "fijo";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alfa (opacidad = 70)";
// Cancelar barra de desplazamiento
document.body.appendChild (PROCBG);
document.body.style.overflow = "auto";
var pimg = document.createElement ("img"); // crear un img
pimg.setAttribute ("id", "bg_img"); // Defina la identificación del div
pimg.setAttribute ("src", directionImg); // Defina la identificación del div
var img_w = (w - img_w) / 2;
var img_h = (h - img_h) / 2;
pimg.style.top = img_h + "px";
pimg.style.left = img_w + "px";
pimg.style.position = "fijo";
pimg.style.opacity = "0.9";
document.getElementById ("myBG"). AppendChild (PIMG);
}
función cerrada () // Cierre la capa emergente
{
var mybg = document.getElementById ("mybg");
document.body.removechild (mybg);
document.body.style.overflow = "Auto"; // Restaurar Page Scrollbar
//document.getelementByid("Mybg").style.display="none ";
}
show ('Loading/Loading3.gif', '100', '100');
document.OnreadyStateChange = subsomething; // Ejecutar este método cuando cambia el estado de carga de la página.
function subsomething () {
if (document.readyState == "Complete") {// Ingrese cuando el estado de carga de la página esté completamente finalizado
cerrado ();
}
}
</script>
</html>