Máscara transparente simples em tela cheia (lightBox)

Autor：Eve Cole Data da Última Atualização：2010-06-09 17:08:28

Não faz muito tempo, um internauta que estava prestes a se formar me enviou um e-mail. Seu projeto de graduação precisava obter um efeito de tela de bloqueio, mas ele não conseguia entender o código-fonte da caixa de diálogo que postei antes. código relacionado à tela de bloqueio. Eu disse que iria publicá-lo em dois dias. Como tenho estado muito ocupado recentemente, só me lembrei agora e espero que não seja tarde para escrever este artigo.

Indo direto ao ponto:

Hoje em dia, as camadas de máscara semitransparentes de tela inteira são amplamente utilizadas em sites web2.0. A maioria das máscaras é implementada calculando o tamanho da página e cobrindo-a com uma camada do mesmo tamanho da página, como Tencent qzone e backend wordpress. . Este método é compreensível, mas falhará no IE8 quando a página for muito longa (a explicação de informações estrangeiras é que está relacionado à placa gráfica da máquina. Alguns alunos com gráficos perfeitos coçaram a cabeça após encontrarem esse problema). , eles até querem que o IE8 seja forçado a usar o método do IE7 para analisar seus trabalhos. Na verdade temos uma maneira melhor, vamos usar CSS para resolver!

Lembra de " posição:fixa "? É um novo atributo do CSS2. Ele pode fazer com que um elemento fique parado na página e não se mova ao arrastar a barra de rolagem. Por exemplo, a barra de navegação fixa no topo do Qzone é implementada desta forma. Da mesma forma, também podemos usar uma camada com 100% de altura e largura para cobrir a janela de visualização do navegador, para que o mascaramento de tela inteira possa ser alcançado. Não há necessidade de calcular o tamanho da página e não há necessidade de modificar dinamicamente. o tamanho ao redimensionar o navegador.

Mas há uma dor de cabeça. O IE6 não suporta "posição: fixa". Só podemos modificar dinamicamente seu valor TOP por meio de js para simular o posicionamento estático. -renderizar novamente. Mas a Microsoft nos forneceu um recurso muito interessante. Se você definir uma imagem de fundo estaticamente posicionada para a tag html ou body, a camada não irá tremer quando a barra de rolagem for arrastada, simulando quase perfeitamente "position:fixed" ". Em projetos reais, descobri que esse recurso também pode acionar outras funções especiais, que explicarei mais adiante.

Para evitar problemas, usamos a expressão maligna para escrever alguns scripts em CSS para IE6 e reposicionar nossa camada de máscara ao arrastar a barra de rolagem. Diz a lenda que a expressão exige muito desempenho, mas nossa expressão quase não tem perdas. Os alunos interessados podem estudar a expressão em profundidade.

Ok, depois de ser compatível com o boneco cabeçudo IE6, nossa máscara de tela de bloqueio foi adotada pelos navegadores convencionais. No entanto, os alunos que usam js para escrever efeitos ficam sempre muito frustrados e sempre querem adicionar alguma coisa, então vamos adicionar um. pequeno script para interromper as operações do usuário quando a tela está bloqueada, desabilitar a barra de rolagem, roda, tecla tab, selecionar tudo, atualizar e clicar com o botão direito para simular uma 'tela de bloqueio' real:

Execute a caixa de 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bloquear página</ título> <meta name="autor" content="www.planeart.cn" /> <style> #pageOverlay {visibilidade:posição oculta:fixo;esquerda:0; 100%; altura:100%; background:#000; filter:alpha(opacity=70); :0; altura:100% } * html #pageOverlay { posição: absoluto; esquerda: expressão(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); ); } } </style> <script> (function(){ // Obtém o objeto var $ = function (id){ return document.getElementById(id); }; // Percorre var each = function(a, b) { for (var i = 0, len = a.length; i < len; i++) b(a[i], i }; obj.attachEvent) { obj['e' + tipo + fn] = obj[tipo + fn] = function(){obj['e' + tipo + fn](window.event);} obj.attachEvent( 'on' + type, obj[type + fn]); else { obj.addEventListener(type, fn, false }); // Remover evento var unbind = function (obj, type, fn) { if ( obj.detachEvent) { tente { obj.detachEvent('on' + tipo, obj[tipo + fn]); , fn, false); // Impedir o comportamento padrão do navegador var stopDefault = function(e){ e.preventDefault ? e.returnValue = false }; Posição var getPage = function(){ var dd = document.documentElement, db = document.body; return { esquerda: Math.max(dd.scrollLeft, db.scrollLeft), topo: Math.max(dd.scrollTop, db. scrollTop) } }; // Tela de bloqueio var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; p.top; // Restrições de operação do mouse da página this.mouse = function(evt){ var e = evt || stopDefault(e); 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { bind(document, o, lock.mouse }); // Bloqueia teclas específicas: F5, Ctrl + R, Ctrl + A, Tab, cima, baixo this.key = function(evt){ var e = evt || window.event, key = e.keyCode; || (e.ctrlKey && chave == 65) || (chave == 9) || (chave == 38) || (chave == 40)) { tentar{ e.keyCode = 0; ){}; stopDefault(e); }; bind(document, 'keydown', lock.key); (['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { unbind(document, o, lock.mouse); }); chave); ){ lock.close(); 40%; ">Ativar tela de bloqueio</button> <ol id="test"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> li> <li>囧</li> </ol> <div id="pageOverlay"></div> </body> </html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]

Texto original: http://www.planeart.cn/?p=792