Este artigo descreve o método de exibir um efeito de máscara transparente de tela preta cinza preta por JS+CSS. Compartilhe para sua referência. A análise específica é a seguinte:
Existem esses efeitos em muitos sites. Depois de executar uma certa operação, uma máscara translúcida cinza-preta será exibida. O conteúdo especificado pode ser operado nele, como uma caixa de login e outros conteúdos. Vamos introduzir como alcançar esse efeito. O exemplo do código é o seguinte:
Copie o código da seguinte forma: <! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "autor" content = "// www.vevb.com/"/>
<title> Como exibir um efeito de máscara transparente cinza-preto de tela cheia-wulin.com </title>
<style type = "text/css">
*
{
margem: 0px;
preenchimento: 0px;
}
.zhezhao
{
largura: 100%;
Altura: 100%;
Background-Color:#000;
filtro: alfa (opacidade = 50);
-Moz-Opacity: 0,5;
Opacidade: 0,5;
Posição: Absoluto;
Esquerda: 0px;
Top: 0px;
Exibir: Nenhum;
Z-Index: 1000;
}
.Conecte-se
{
Largura: 280px;
Altura: 180px;
Posição: Absoluto;
TOP: 200px;
Esquerda: 50%;
Background-Color:#000;
margem-esquerda: -140px;
Exibir: Nenhum;
Index z: 1500;
}
.contente
{
Margin-top: 50px;
Cor: vermelho;
altura de linha: 200px;
Altura: 200px;
Alinhamento de texto: centro;
}
</style>
<script type = "text/javascript">
window.onload = function ()
{
var zhezhao = document.getElementById ("zhezhao");
var login = document.getElementById ("login");
var Bt = document.getElementById ("Bt");
var btclose = document.getElementById ("btclose");
Bt.OnClick = function ()
{
zhezhao.style.display = "bloco";
login.style.display = "bloco";
}
btclose.OnClick = function ()
{
zhezhao.style.display = "nenhum";
login.style.display = "nenhum";
}
}
</script>
</head>
<Body>
<div id = "zhezhao"> </div>
<div id = "login"> <button id = "btclose"> clique para fechar </button> </div>
<div> wulin.com dá as boas -vindas a você, <botão id = "bt"> clique para aparecer máscara </botão> </div>
</body>
</html>
O acima implementa a função básica da máscara. Ao clicar para aparecer a máscara, um objeto será exibido. Ao clicar para fechar, o efeito da máscara desaparecerá. Aqui está como alcançar o efeito:
Princípio de implementação:
Crie uma divisão em tela cheia, usando o posicionamento absoluto, para que possa ser separado do fluxo de documentos, sem afetar outros elementos, e defina-o como um estado translúcido. Obviamente, essa transparência pode ser ajustada à vontade e criar um elemento de login, que também usa posicionamento absoluto e torna seu valor de atributo Z-Index maior que a div na tela e, neste momento, não será coberta pelo div. No estado padrão, o valor do atributo de exibição desses dois divs é nenhum. Ao clicar no botão correspondente, eles podem alterar o valor do atributo de exibição.
Sugestão: o código manuscrito o máximo possível pode melhorar efetivamente a eficiência e a profundidade do aprendizado.
Espero que este artigo seja útil para a programação da Web de todos.