Efecto: Cuando los usuarios que usan los sistemas de Windows se apagan, la interfaz que aparece solo permite a los usuarios elegir el cierre, iniciar sesión o cancelar las acciones, mientras que los programas en el escritorio no se pueden usar, y la pantalla está atenuada. El efecto de apagado de Windows se muestra en la Figura 22.1.
Beneficios del uso de este efecto en las páginas web: ¿Cuáles son los beneficios de usar este efecto de cierre en las páginas web? Primero, después de hacer clic en un enlace, las acciones que no están disponibles para el usuario en este momento están ocultas en segundo plano, y las acciones disponibles se colocan en la parte superior de la pantalla y se resaltan, lo que puede evitar la incumplimiento del usuario. En segundo lugar, destacar la información también puede recordar a los usuarios cosas a las que se les debe prestar atención.
Principio: El principio de lograr este efecto en una página web es muy simple. Cree dos capas, una como capa de sombreado, cubriendo toda la página y que se muestra en gris; La otra capa sirve como una parte resaltada, sobre la capa de sombreado, que se puede establecer configurando la propiedad del índice Z de la capa. Cuando se cancele el efecto de cierre, simplemente elimine estos dos elementos de capa en la página.
Código:
<html>
<Evista>
<title> AJAX Efecto de cierre </title>
<styletype = text/css>
#lightbox {/*Esta capa es una capa destacada*/
Border-right:#ffff1pxsolid;
Border-top:#ffff1pxsolid;
Pantalla: bloque;
Índice Z: 9999;/*Establezca esta capa en la parte superior de la página web, configela lo suficientemente grande*/
Antecedentes:#fdfce9;/*establecer color de fondo*/
Izquierda: 50%;
Margen: -220px0px0px-250px;
Borde-izquierda:#ffff1pxsolid;
Ancho: 500px;
Border-Bottom:#FFFF1PXSOLID;
Posición: Absoluto;
Arriba: 50%;
Altura: 400px;
Text-Align: Izquierda
}
#Overlay {/*Esta capa es una capa de cubierta*/
Pantalla: bloque;
Index Z: 9998;/*Establezca la parte inferior de la capa de resaltado*/
Filtro: alfa (opacidad = 20);/*establecido en transparente*/
Izquierda: 0px;
Ancho: 100%;
Posición: Absoluto;
Arriba: 0px;
Altura: 100%;
Color de fondo:#000;
Opacidad de Moz: 0.8;
Opacidad: .80
}
</style>
</ablo>
<Body>
<ahref = http: //www.baidu.comtarget=_blank> baidu </a>
<!-Esta capa es una capa de portada->
<divid = superpuesto> </div>
<!-Esta capa es una capa destacada->
<divid = lightbox> <ahref =#onclick = javascript: f ()> cerrar </a> & nbsp; <ahref =#onClick = javascript: f1 ()> abre </a> </div>
</body>
</html>
<script>
funct ()
{
document.getElementById (superpuesto) .style.display = none;
}
funct1 ()
{
document.getElementById (superposición) .style.display = block;
}
</script>
Nota: Si hay una etiqueta <select> en el navegador IE, la etiqueta no puede sobrescribirse por la capa sobrescribida, pero se puede sobrescribir en otros navegadores. La Figura 22.3 muestra el efecto de la etiqueta <select> en el navegador IE, y la Figura 22.4 muestra el efecto de la etiqueta <select> en mozzilafirefox.
Figura 22.3 <select> Etiqueta en el navegador IE
Figura 22.4 La etiqueta <select> en el navegador de mozzilafirefox
Entonces, al usar el navegador IE, primero debe ocultar el elemento <select> en la página web. Por ejemplo, el siguiente código se puede usar para ocultar todos los elementos <select> de la página.
seleccionar = document.getElementsByTagName ('Select');
para (i = 0; i <selects.length; i ++) {
selecciona [i] .style.visibility = visibilidad;
}