Pode -se dizer que depois que eu entendi a "cobra" anterior, essa função é realmente muito menos difícil do que eu imaginava no início. Obviamente, esse método é suspeito de ser complicado e, em última análise, a função foi implementada. Vamos analisá -lo e organizá -lo.
1. Princípio da implementação
O princípio da implementação deste artigo é o seguinte:
* De fato, a camada pop-up, a camada de máscara e a exibição original da página são três divs diferentes, respectivamente
* O nível da camada pop-up está acima da camada de máscara e o nível da camada de máscara está acima da exibição da página original;
* A camada de máscara tem um efeito claro
* A camada de máscara não tem significado prático, por isso não precisa ser escrito na parte HTML. Claro, também pode ser realizado após escrever.
2. Implementação de código
A linguagem HTML é a seguinte:
A cópia do código é a seguinte:
<html>
....
<Body>
<Center>
<div> <input type = "button" value = "go" onclick = "show ()"> </div>
<div id = "alert" style = "display: nenhum;">
<morm>
Conecte-se
<input type = "text"> <input type = "senha"> <input type = "submit" value = "login">
</morm>
</div>
</central>
</body>
</html>
JavaScript implementa camada pop-up e camada de máscara:
A cópia do código é a seguinte:
<span style = "font-size: 12px;"> function show () {
var alertPart = document.getElementById ("alert");
alertPart.style.display = "bloco";
alertPart.style.Position = "Absolute";
alertPart.style.top = "50%";
alertPart.style.left = "50%";
alertPart.style.margintop = "-75px";
alertPart.style.marginleft = "-150px";
alertPart.style.background = "ciano";
alertPart.style.width = "300px";
alertPart.style.Height = "200px";
alertPart.style.zindex = "501";
var mybg = document.createElement ("div");
mybg.setattribute ("id", "mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.Height = "100%";
mybg.style.Position = "Absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zindex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "alfa (opacidade = 30)";
document.body.appendChild (mybg);
document.body.style.overflow = "Hidden";
}
</script> </span>
Aqui, usamos o Z-Index para distinguir hierarquias, opacidade e filtro: alfa (opacidade =) transparência, document.createElement ("div") e document.body.appendchild (), tudo isso é usado antes, para que possamos alcançá-los. De fato, quando o princípio for entendido, tudo será muito mais fácil.
A estrada é longa e árdua