Se puede decir que después de entender la "serpiente" anterior, esta función es realmente mucho menos difícil de lo que imaginé al principio. Por supuesto, se sospecha que este método es complicado y, en última instancia, se ha implementado la función. Analicemos y organicemos.
1. Principio de implementación
El principio de implementación de este artículo es el siguiente:
* De hecho, la capa emergente, la capa de máscara y la pantalla de la página original son tres divs diferentes respectivamente
* El nivel de la capa emergente está por encima de la capa de máscara, y el nivel de la capa de máscara está por encima de la pantalla original;
* La capa de máscara tiene un efecto claro
* La capa de máscara no tiene un significado práctico, por lo que no es necesario escribir en la parte HTML. Por supuesto, también se puede realizar después de escribir.
2. Implementación del código
El idioma HTML es el siguiente:
La copia del código es la siguiente:
<html>
....
<Body>
<centro>
<Div> <input type = "button" value = "go" onClick = "show ()"> </div>
<div id = "alerta" style = "Display: None;">
<form>
Acceso
<input type = "text"> <input type = "contraseña"> <input type = "enviar" valor = "inicio de sesión">
</form>
</div>
</Center>
</body>
</html>
JavaScript implementa la capa emergente y la capa de máscara:
La copia del código es la siguiente:
<span style = "font-size: 12px;"> function show () {
var alertPart = document.getElementById ("alerta");
alertpart.style.display = "bloque";
alertpart.style.position = "Absolute";
alertpart.style.top = "50%";
alertpart.style.left = "50%";
alertpart.style.margIntop = "-75px";
alertpart.style.marginleft = "-150px";
alertpart.style.background = "Cyan";
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 (opacidad = 30)";
document.body.appendChild (myBG);
document.body.style.overflow = "Hidden";
}
</script> </span>
Aquí usamos el índice Z para distinguir las jerarquías, la opacidad y el filtro: transparencia alfa (opacidad =), documento.createElement ("div") y document.body.appendChild (), todos se usan antes, para que podamos lograrlos. De hecho, cuando se entiende el principio, todo será mucho más fácil.
El camino es largo y arduo