Efeito: Quando os usuários que usam os sistemas Windows são desligados, a interface que aparece apenas permite que os usuários escolham o desligamento, faça o logot ou cancele as ações, enquanto os programas na área de trabalho não podem ser usados e a tela está acinzentada. O efeito de desligamento do Windows é mostrado na Figura 22.1.
Benefícios do uso desse efeito nas páginas da web: Quais são os benefícios de usar esse efeito de desligamento nas páginas da web? Primeiro, depois de clicar em um link, as ações que não estão disponíveis para o usuário no momento estão ocultas em segundo plano, e as ações disponíveis são colocadas na parte superior da tela e destacadas, o que pode evitar a malha do usuário. Em segundo lugar, destacar as informações também pode lembrar os usuários de coisas que devem receber atenção.
Princípio: O princípio de alcançar esse efeito em uma página da web é muito simples. Crie duas camadas, uma como uma camada de sombreamento, cobrindo a página inteira e exibindo em cinza; A outra camada serve como uma parte destacada, acima da camada de sombreamento, que pode ser definida definindo a propriedade Z-Index da camada. Quando o efeito de desligamento for cancelado, basta excluir esses elementos de duas camadas na página.
Código:
<html>
<head>
<title> Efeito de desligamento do Ajax </ititle>
<styleType = text/css>
#lightBox {/*Esta camada é uma camada de destaque*/
Right-Right:#ffff1pxSolid;
TOP da borda:#ffff1pxSolid;
Exibição: bloco;
Z-Index: 9999;/*Defina esta camada na parte superior da página da web, defina-a grande o suficiente*/
Antecedentes:#fdfce9;/*Defina a cor do fundo*/
Esquerda: 50%;
Margem: -220px0px0px-2550px;
Border-left:#ffff1pxSolid;
Largura: 500px;
Bottom de fronteira:#ffff1pxSolid;
Posição: Absoluto;
TOP: 50%;
Altura: 400px;
Alinhamento de texto: esquerda
}
#overlay {/*Esta camada é uma camada de capa*/
Exibição: bloco;
Z-Index: 9998;/*Defina a parte inferior da camada de destaque*/
Filtro: alfa (opacidade = 20);/*defina como transparente*/
Esquerda: 0px;
Largura: 100%;
Posição: Absoluto;
Top: 0px;
Altura: 100%;
Background-Color:#000;
Moz-opacidade: 0,8;
Opacidade: .80
}
</style>
</head>
<Body>
<href = http: //www.baidu.comtarget=_blank> Baidu </a>
<!-Esta camada é uma camada de capa->
<divid = sobreposição> </div>
<!-Esta camada é uma camada de destaque->
<divid = Lightbox> <ahref =#onclick = javascript: f ()> feche </a> & nbsp; <ahref =#onclick = javascript: f1 ()> aberto </a> </div>
</body>
</html>
<Cript>
functionf ()
{
document.getElementById (Sobreposição) .style.display = Nenhum;
}
functionf1 ()
{
document.getElementById (Sobreposição) .style.display = block;
}
</script>
NOTA: Se houver uma tag <select> no navegador do IE, a tag não poderá ser substituída pela camada substituída, mas poderá ser substituída em outros navegadores. A Figura 22.3 mostra o efeito da tag <select> no navegador do IE e a Figura 22.4 mostra o efeito da tag <select> no Mozzilafirefox.
Figura 22.3 <leclect> tag no ie navegador
Figura 22.4 A tag <select> no navegador Mozzilafirefox
Portanto, ao usar o navegador do IE, você deve primeiro ocultar o elemento <select> na página da web. Por exemplo, o código a seguir pode ser usado para ocultar todos os elementos <SElect> da página.
select = document.getElementsByTagName ('Select');
for (i = 0; i <selects.length; i ++) {
seleciona [i] .style.visibility = visibilidade;
}