Este artículo describe el método de aparecer un efecto de máscara transparente gris gris de pantalla completa por JS+CSS. Compártelo para su referencia. El análisis específico es el siguiente:
Hay tales efectos en muchos sitios web. Después de realizar una determinada operación, aparecerá una máscara translúcida gris-negro. El contenido especificado se puede operar en él, como un cuadro de inicio de sesión y otros contenidos. Presentemos cómo lograr este efecto. El ejemplo del código es el siguiente:
Copie el código de la siguiente manera: <! DocType Html>
<html>
<Evista>
<meta charset = "utf-8">
<meta name = "autor" content = "// www.vevb.com/"/>
<title> Cómo aparecer un efecto de máscara transparente gris-negro de pantalla completa-wulin.com </title>
<style type = "text/css">
*
{
margen: 0px;
relleno: 0px;
}
.zhezhao
{
Ancho: 100%;
Altura: 100%;
Color de fondo:#000;
Filtro: alfa (opacidad = 50);
-Pacilidad de MOZ: 0.5;
Opacidad: 0.5;
Posición: Absoluto;
Izquierda: 0px;
arriba: 0px;
Pantalla: ninguno;
Índice Z: 1000;
}
.acceso
{
Ancho: 280px;
Altura: 180px;
Posición: Absoluto;
Arriba: 200px;
Izquierda: 50%;
Color de fondo:#000;
margen-izquierda: -140px;
Pantalla: ninguno;
Índice Z: 1500;
}
.contenido
{
margen-top: 50px;
Color: rojo;
Línea de altura: 200px;
Altura: 200px;
Text-Align: Center;
}
</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 = "bloque";
login.style.display = "bloque";
}
btclose.onclick = function ()
{
zhezhao.style.display = "ninguno";
Login.style.display = "Ninguno";
}
}
</script>
</ablo>
<Body>
<div id = "zhezhao"> </div>
<div id = "Login"> <Button id = "BtClose"> Haga clic para cerrar </botón> </div>
<iv> wulin.com le da la bienvenida, <button id = "bt"> haga clic para aparecer en mascarilla </boton> </div>
</body>
</html>
Lo anterior implementa la función de máscara básica. Al hacer clic para aparecer en la máscara, aparecerá un objeto. Al hacer clic para cerrar, el efecto de la máscara desaparecerá. Aquí está cómo lograr el efecto:
Principio de implementación:
Cree un DIV de pantalla completa, utilizando un posicionamiento absoluto, para que pueda separarse de la secuencia de documentos, sin afectar otros elementos, y establecerlo en un estado translúcido. Por supuesto, esta transparencia se puede ajustar a voluntad y crear un elemento de inicio de sesión, que también utiliza el posicionamiento absoluto y hace que su valor de atributo de índice Z sea mayor que el DIV en la pantalla, y en este momento no estará cubierto por el DIV de pantalla completa. En el estado predeterminado, el valor de atributo de visualización de estos dos divs es ninguno. Al hacer clic en el botón correspondiente, pueden cambiar su valor de atributo de visualización.
Sugerencia: el código escrito a mano tanto como sea posible puede mejorar efectivamente la eficiencia y la profundidad del aprendizaje.
Espero que este artículo sea útil para la programación web de todos.