Este capítulo presenta cómo hacer clic en un botón para aparecer en una ventana centrada, y esta ventana tiene un efecto de enmascaramiento translúcido. ., El código introducido a continuación puede simplemente implementar esta pequeña cuñada.
El código es el siguiente:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<meta name = "autor" content = "http://www.softwhy.com/"/>
<title> hormiga tribu </title>
<style type = "text/css">
#desteñir {
Pantalla: ninguno;
Posición: Absoluto;
arriba: 0%;
Izquierda: 0%;
Ancho: 100%;
Altura: 100%;
Color de fondo: negro;
Index Z: 1001;
-Pacilidad de MOZ: 0.8;
Opacidad: .80;
Filtro: alfa (opacidad = 80);
}
#luz{
Pantalla: ninguno;
Posición: Absoluto;
arriba: 25%;
Izquierda: 25%;
Ancho: 50%;
Altura: 50%;
relleno: 16px;
Border: 3px de naranja sólida;
Color de fondo: blanco;
Índice Z: 1002;
desbordamiento: auto;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var linkbt = document.getElementById ("LinkBt");
var light = document.getElementById ('light');
var fade = document.getElementById ('Fade');
var cerradorbt = document.getElementById ("CloseBt");
linkbt.OnClick = function () {
light.style.display = 'bloque';
Fade.style.display = 'bloque';
}
CloseBT.OnClick = function () {
light.style.display = 'ninguno';
Fade.Style.Display = 'None';
}
}
</script>
</ablo>
<Body>
<a href = "javascript: void (0)" id = "linkbt"> Haga clic aquí para abrir la ventana </a>
<div id = "light"> <a href = "javaScript: void (0)" id = "CloseBt"> Ventana Cerrar </a> </div>
<div id = "fade" "> </div>
</body>
</html>
El código anterior implementa nuestros requisitos, y el siguiente presenta brevemente su proceso de implementación.
1. Principio de implementación:
Por defecto, la capa y la ventana de máscara están ocultos e invisibles. Ambos elementos utilizan el posicionamiento absoluto y establecen el valor del atributo del índice Z de la ventana centrada para que sea mayor que la capa de máscara, de modo que pueda cubrirse en la capa de máscara. Cuando se hace clic en el botón Cerrar, la capa y la ventana de la máscara se pueden ocultar, y el principio es aproximadamente el mismo.