Destacamento de estilo e comportamento ao implementar o LightBox reduz JS

Autor：Eve Cole Data da Última Atualização：2025-05-23 13:00:04

[Navegadores que participam 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 na caixa de luz e reduzir o trabalho de JS em todos os aspectos (oclusão de tela cheia, oclusão do IE6, seleção, centralização bidirecional, conteúdo altamente adaptável etc.).

Primeiro, envie o código :

Execute a caixa de código

<! Doctype html public -// w3c // dtd xhtml 1.0 transitório // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <meta nome = conteúdo do autor = chomo/> <link rel = start href = http: //www.14px.com title = home/> <title> bloqueio de tela completa, caixa de luz centrada automaticamente </title> <estilo type = text/css>* {margem: 0; preenchimento: 0; } html, corpo {altura: 100%; estouro: oculto; Fonte: 12px/1.5 simsun;}. mypage {altura de linha: 3; Overflow: Auto; largura: 100%; Altura: 100%;}. Esquerda: 0; topo: 0; largura: 100%; Altura: 100%;}. PopupComponent {Z-Index: 2; Exibir: Nenhum;}. POPUPPIFRAME {Display: Nenhum; _display: bloco; _filter: alpha (opacidade = 0);}. PopUpcover {Background:#000; Opacidade: 0,7; *filtro: alfa (opacidade = 70);}. Lightbox {text-align: Center; Overflow: Auto;}. LightBoxContent {Display: Inline-Block; *Display: Inline; zoom: 1; Largura: 300px; preenchimento: 10px; Antecedentes: #FFF; Fronteira: 5px Solid #00B4FF; Alinhamento vertical: meio;}. LightBoxMaxHeight {Display: Inline-Block; Alinhamento vertical: meio; Altura: 100%; *Altura: 99,5%; Largura: 1px; estouro: oculto; margem-esquerda: -1px;}. LightBoxWrapper {display: inline-Block; *Display: Inline; zoom: 1; Text-align: esquerda;}. LightboxClose {color:#f00;}. LightBoxSubMit {margin-top: 10px; Top de preenchimento: 5px; TOP de borda: 1px Solid #ccc;}. LightboxSubMit entrada {font-size: 12px; preenchimento: 0 10px; transbordamento: visível; MARGIN: 0 5PX;} </style> </ad Head> <body> <div class = popUpComponent ID = Lightbox> <iframe class = popupComponent ID = Lightbox> <iframe class = PopUpCover> </Div ClassBoxnc = LightBox> <Class da ClassMaxHeight> </span> <divtle Class> < está centrado <Br/> </div> <div class = LightBoxSubMit> <Tipo de entrada = Valor do botão = Determine onclick = HideLayer ('Lightbox')/> <Tipo de entrada = Valor do botão = Cancelar onclick = HideLayer ('Lightbox')/> </div> </div> </div> <class Popup = PopupCompcompompcompompcompompcomn)/</div> class=popupframe></iframe><div class=popupcover></div><div class=lightbox><div class=lightboxcontent><div class=lightboxwrapper>When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the O conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. /> Quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <Br /> Quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo tiver excedido a altura de uma tela exceder a altura de uma tela de uma altura. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <r /> /> Quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <Br /> Quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo tiver excedido a altura de uma tela exceder a altura de uma tela de uma altura. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <br /> quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela quando o conteúdo excedeu a altura de uma tela. <Br/> </div> <div class = LightboxSubMit> <Tipo de entrada = Valor do botão = Determine onclick = HideLayer ('LightBox2')/> <Entrada Tipo = Valor do botão = Cancelar onclick = HidELAYER ('LightBox2')/> </div> </div> <span class = lightboxMaxHeight> /> Fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> <div estilo = text-align: center;> <entrada de entrada = botão = botão de botão onclick = showLayer ('luminbox') /> < /divinding rich content <r /preting rich <r /> preceding rich content <r rich contents rich <burn) /> < /divinding> rico <br /adtending rich <r /> preceding rich content <r rich content of therent) /> < /divinding> rico <br /finging rich <r /> preceding rich content <r rico ') /> < /divinding> rico <r /preting rich <r /> precente Conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> <divisos de texto = text-align: central; Conteúdo <Br /> Fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> fingindo conteúdo rico <br /> /> <BROT> <BROTE> A seleção para testar se Ie6 pode cobrir < /option> < /select> <r /fixed para ser rico para ser rico para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos para serem ricos em que 6 <r />. be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br /> <leclect> <pution> Outro selecione para testar se o IE6 pode cobri-lo </ppthion> </leclect> <r /> fingiu ser rico em conteúdo <r /> fingiu ser rico em conteúdo <r /> <div estilo = text-align: Center;> <input Type = Button Value = Button OnClick = ShowLayer ('Lightbox') /> onclick=showlayer('lightbox2') /></div>Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br /> Finja ser rico em conteúdo <BR /> Finquendo rico em conteúdo <BR /> Finja ser rico em conteúdo <BR /> Finge ser rico em conteúdo <BR /> Finquendo ser rico em conteúdo <BR /> Finge ser rico em conteúdo <br /> finge ser rico em conteúdo <br /> pretende ser rico em conteúdo <r /> adntecem a serem conteúdos para serem ricos em conteúdo <r /BR /> Pretting para ser rico em conteúdo <r /> adquirir conteúdo para serem ricos em conteúdo <r /Br /> PrettEn Ter Rich em conteúdo <r />, para se contentar em conteúdo <r /> Less To Legrend em conteúdo <r /Br /> Pretendo ser rico em conteúdo <r /> adntecem a serem contentes. O conteúdo <Br /> finge ser rico em conteúdo <BR /> Fingende ser rico em conteúdo <BR /> Finja ser rico em conteúdo <BR /> Finja ser rico em conteúdo <BR /> Finquendo ser rico em conteúdo <BR /> Fingend Rich em conteúdo <r /> Frete Ter Rich em conteúdo <r /> Prescendo para ser rico em conteúdo <r /> FENTENDO FENTENDO O CONTEÚTIO DO CONTEÚTIO DO BRONTROTE> PRENTENDO DO CONTEÚDO. Seja rico em conteúdo <r /> finge ser rico em conteúdo <Br /> Finja ser rico em conteúdo <r /> Finja ser rico em conteúdo <Br /> Finja ser rico em conteúdo <BR /> Finquendo rico em conteúdo <BR /> Finque.getbyId /> </div> < /script> Função) hideLayer (id) {document.getElementById (id) .style.display = nenhum;} </sCript> </body> </html>

[Ctrl+A todas as dicas de seleção: você pode modificar algum código primeiro e depois pressionar Run]

Esta caixa de luz possui os seguintes recursos, você pode testá-lo modificando o código ^- ^:

Clicar em qualquer posição na página pode cobrir perfeitamente a tela (neste momento, qualquer elemento incluindo a barra de rolagem não pode ser controlado diretamente). O elemento de seleção pode ser bloqueado sem se esconder no IE6 (o defeito do método de oclusão do iframe: após o bloqueio, se a barra de rolagem for arrastada, a seleção ainda se moverá para o nível superior).
A caixa de luz é altamente adaptável ao seu conteúdo e apresenta um estado de centralização perfeito.
Quando o conteúdo é uma única linha, ele é exibido no centro; Quando o conteúdo é de várias linhas, ele é exibido à esquerda; Quando a altura do conteúdo faz com que a caixa de luz exceda a altura da tela, ele aparece barras de rolagem e é exibido na parte superior, para que os leitores possam ler na imagem completa.

Se você estiver interessado, as seguintes dicas para formar esta caixa de luz estão disponíveis para você se referir a:

1. Métodos para sombreamento de tela inteira:

um. Esconda a barra de rolagem do HTML/corpo.

b. Use uma div como máscara e, em seguida, use uma div como uma página com barras de rolagem, uma empilhada na parte superior e outra empilhada na parte inferior.

Execute a caixa de código

[Ctrl+A todas as dicas de seleção: você pode modificar algum código primeiro e depois pressionar Run]