A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html>
<head>
<Title> Novo 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 = "description" content = "">
<style type = "text/css">
*
{
preenchimento: 0px;
margem: 0px;
}
#Idiv
{
Largura: 900px;
Altura: Auto;
Posição: Absoluto;
Z-Index: 1000;
Fronteira: 2px sólido #ffffff;
Antecedentes: #ffffff;
}
</style>
</head>
<Body>
<div id = "idiv" style = "display: Nenhum;">
<a href = "javascript: void (0)" onclick = "fechingiv ()"> clique para fechar a camada </a>
<br/> Diferenças no document.documentElement <br/> Diferenças em document.documentElement
</div>
<div> <a href = "javascript: void (0)" id = "show" onclick = "show ()"> clique para abrir a camada pop-up! </div>
</body>
<script langue = "javascript">
função show ()
{
var idiv = document.getElementById ("idiv");
Idiv.style.display = "bloco";
// as seguintes peças devem ser centradas para exibir a camada pop-up
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";
// Há um problema aqui. A camada pop-up está centrada na esquerda e na direita, mas a altura não está centrada e é exibida na parte superior, fazendo com que uma parte seja invisível. Portanto, adicione temporariamente a margem abaixo.
// as seguintes peças tornam a página inteira clicável de gray-out
var procbg = document.createElement ("div"); // Crie uma div primeiro
procbg.setattribute ("id", "mybg"); // Defina o ID da div
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.Height = "100%";
procbg.style.position = "fixado";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alpha (opacidade = 70)";
// Cancelar barra de rolagem
document.body.appendChild (procbg);
document.body.style.overflow = "Auto";
// As seguintes partes percebem o efeito de arrasto da camada pop-up (se você quiser mover a div na camada pop-up, basta fazer logon e remover o seguinte)
/*
var posx;
var posy;
Idiv.onmousedown = função (e)
{
if (! e) e = window.event; // ou seja
Posx = e.clientX - parseint (idiv.style.left);
posy = e.clienty - parseint (idiv.style.top);
document.onMousEmove = mouseMove;
}
document.onmouseup = function ()
{
document.onMousEmove = null;
}
função mousemove (EV)
{
if (ev == null) ev = window.event; // ou seja,
Idiv.style.left = (ev.clientX - Posx) +"px";
Idiv.style.top = (ev.clienty - posy) +"px";
}*/
}
Função fechada () // feche a camada pop-up
{
var idiv = document.getElementById ("idiv");
var mybg = document.getElementById ("mybg");
document.body.removeChild (mybg);
Idiv.style.display = "nenhum";
document.body.style.overflow = "Auto"; // Restaurar a página de rolagem da página
//document.getElementById("mybg").style.display="none ";
}
</script>
</html>
// Altere a camada pop-up acima e faça sua própria função de carregamento. Determine se a página foi carregada e oculte o carregamento.gif após a conclusão
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> Novo documento </title>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
</head>
<corpo onload = "subsomething ()">
</body>
<script type = "text/ecmascript">
Função Show (ADDERETIMG, IMG_W, IMG_H) {
// Obtenha a altura da página
var h = (document.documentElement.clientHeight> document.documentElement.clientHeight)? document.documentElement.scrolHeight: document.documentElement.clientHeight;
// Obtenha a largura da página
var w = (document.documentElement.scrollwidth> document.documentElement.clientWidth)? Document.DocumentElement.ScrollWidth: Document.DocumentElement.ScrollWidth;
var procbg = document.createElement ("div"); // Crie uma div primeiro
procbg.setattribute ("id", "mybg"); // Defina o ID da div
procbg.style.background = "#555";
procbg.style.width = "100%";
procbg.style.Height = "100%";
procbg.style.position = "fixado";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "alpha (opacidade = 70)";
// Cancelar barra de rolagem
document.body.appendChild (procbg);
document.body.style.overflow = "Auto";
var pimg = document.createElement ("img"); // Crie um IMG
pimg.setAttribute ("id", "bg_img"); // Defina o ID da div
pimg.setAttribute ("src", endereço); // Defina o ID da 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 = "fixo";
pimg.style.opacity = "0.9";
document.getElementById ("mybg"). AppendChild (PIMG);
}
Função fechada () // feche a camada pop-up
{
var mybg = document.getElementById ("mybg");
document.body.removeChild (mybg);
document.body.style.overflow = "Auto"; // Restaurar a página de rolagem da página
//document.getElementById("mybg").style.display="none ";
}
show ('carregamento/carregamento3.gif', '100', '100');
Document.onReadyStateChange = Subsomething; // Execute esse método quando o estado de carregamento da página mudar.
função subsomething () {
if (document.readyState == "complete") {// enter quando o estado de carregamento da página terminar completamente
fechado ();
}
}
</script>
</html>