Este capítulo apresenta como clicar em um botão para exibir uma janela centrada, e essa janela tem um efeito de camada de mascaramento translúcido. .
O código é o seguinte:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "autor" content = "http://www.softwhy.com/"/>
<title> Tribo Ant </ititure>
<style type = "text/css">
#desaparecer {
Exibir: Nenhum;
Posição: Absoluto;
topo: 0%;
Esquerda: 0%;
largura: 100%;
Altura: 100%;
Background-Color: Black;
Index z: 1001;
-moz-opacidade: 0,8;
opacidade: .80;
filtro: alfa (opacidade = 80);
}
#luz{
Exibir: Nenhum;
Posição: Absoluto;
TOP: 25%;
Esquerda: 25%;
largura: 50%;
Altura: 50%;
preenchimento: 16px;
borda: 3px laranja sólida;
cor de fundo: branco;
Index z: 1002;
Overflow: Auto;
}
</style>
<script type = "text/javascript">
window.onload = function () {
var linkbt = document.getElementById ("linkbt");
var luz = document.getElementById ('luz');
var fade = document.getElementById ('fade');
var closebt = document.getElementById ("Closebt");
linkbt.OnClick = function () {
luz.style.display = 'bloco';
fade.style.display = 'bloco';
}
closebt.OnClick = function () {
luz.style.display = 'nenhum';
fade.style.display = 'nenhum';
}
}
</script>
</head>
<Body>
<a href = "javascript: void (0)" id = "linkbt"> clique aqui para abrir a janela </a>
<div id = "luz"> <a href = "javascript: void (0)" id = "closebt"> fechar janela </a> </div>
<div id = "fade" "> </div>
</body>
</html>
O código acima implementa nossos requisitos e o seguinte apresenta brevemente seu processo de implementação.
1. Princípio da implementação:
Por padrão, a camada de máscara e a janela estão ocultas e invisíveis. Depois de clicar no link, a janela e a camada de máscara podem ser exibidas e a camada de máscara é definida como um estado translúcido. Ambos os elementos usam o posicionamento absoluto e definem o valor do atributo Z-Index da janela centralizado como maior que a camada de máscara, para que possa ser coberta na camada de máscara. Quando o botão fechar é clicado, a camada de máscara e a janela podem ser ocultas e o princípio é aproximadamente o mesmo.