LightBox blindado em tela cheia e centralizado automaticamente

Autor：Eve Cole Data da Última Atualização：2009-07-27 17:14:47

[Navegadores participantes do teste: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[Sistema operacional: Windows]

Este tutorial tem como objetivo separar o estilo e o comportamento do lightBox e reduzir o trabalho JS em vários aspectos (mascaramento de tela inteira, seleção de máscara no IE6, centralização bidirecional, conteúdo adaptável à altura, etc.).

Primeiro o código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="autor" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Proteção de tela cheia, lightBox de centralização automática</title>
<style type="texto/css">
* {margem:0;
html,corpo { altura:100%; estouro:fonte oculta:12px/1.5 simsun;}
.minhaPágina { altura da linha:3; estouro:auto largura:100%;
.lightBox,
.popupCover,
.popupIframe,
.popupComponent {posição:absoluto;esquerda:0;largura:100%;
.popupComponent { z-index:2; display:none;}
.popupIframe { display:none; _display:block; _filter:alpha(opacidade=0);}
.popupCover { background:#000; opacidade:0,7;
.lightBox { text-align:center; overflow:auto;}
.lightBoxContent { display:inline-block; *display:inline zoom:1;
.lightBoxMaxHeight {display:inline-block;vertical-align:middle height:100%;altura:99,5%largura:1px;
.lightBoxWrapper { display:inline-block; *display:inline zoom:1;
.lightBoxClose {cor:#f00;}
.lightBoxSubmit { margin-top:10px; padding-top:5px; border-top:1px sólido #ccc;}
.lightBoxSubmit entrada {tamanho da fonte:12px; preenchimento:0 10px;margem visível:0 5px;}
</estilo>
</head>
<corpo>
<div class="popupComponent" id="lightBox">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
O texto é centralizado quando o prompt é menor que uma linha<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox')" />
<input type="button" value="Cancelar" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<div class="popupComponent" id="lightBox2">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
Quando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma telaQuando o conteúdo excedeu a altura de uma tela<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox2')" />
<input type="button" value="Cancelar" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="minhaPágina">
Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />
<div style="text-align:center;"><input type="button" value="Botão na primeira tela" onclick="showLayer('lightBox')" /></div>
Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />
<select><option>Um select usado para testar se pode ser coberto no IE6</option></select><br />
Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />
Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />
Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />
<select><option>Outro select para testar se pode ser coberto no IE6</option></select><br />
Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />
<div style="text-align:center;"><input type="button" value="Botão localizado na segunda tela" onclick="showLayer('lightBox')" /><input type="button" value ="Quando o conteúdo excedeu a altura de uma tela" onclick="showLayer('lightBox2')" /></div>
Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />
Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />
Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />Fingir ser rico em conteúdo<br />
</div>
<roteiro>
função showLayer(id) {
document.getElementById(id).style.display = "bloco";
}
função ocultarCamada(id) {
document.getElementById(id).style.display = "none";
}
</script>
</body>
</html>

Este lightBox possui as seguintes características, você pode testá-lo modificando o código ^-^:

Clicar em qualquer lugar da página pode proteger perfeitamente a tela (qualquer elemento, incluindo a barra de rolagem, não pode ser controlado diretamente no momento, no IE6, o elemento selecionado pode ser protegido sem ocultá-lo (a falha do método de blindagem do iframe: após a blindagem,). if Arraste a barra de rolagem e a seleção ainda será movida para o topo).
A altura da lightBox adapta-se ao seu conteúdo e parece perfeitamente centrada.
Quando o conteúdo é uma única linha, ele é exibido no centro; quando o conteúdo é de várias linhas, é exibido à esquerda, quando a altura do conteúdo é tal que o lightBox excede a altura da tela, uma barra de rolagem é exibida; e exibido na parte superior, para que os leitores possam lê-lo na íntegra.

Caso tenha interesse, as seguintes dicas que compõem esta lightBox estão disponíveis para sua referência:

1. Método de mascaramento de tela inteira:

A. Oculte a barra de rolagem de html/body.
B. Use uma div como máscara e depois use outra div para fazer uma página com barras de rolagem, uma na parte superior e outra na parte inferior.