Este artículo describe el método para implementar la capa emergente que cubre toda la página por JS y CSS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Los estilos y estructuras comunes para fondos transparentes enmarcados en la capa emergente son los siguientes:
La copia del código es la siguiente: .alertMessagebg {
Posición: fijo;
_Position: Absoluto;
Ancho: 100%;
Altura: 100%;
Izquierda: 0;
arriba: 0;
Antecedentes:#000;
Opacidad: 0.5;
-Pacilidad de MOZ: 0.5;
Filtro: alfa (opacidad = 50);
Índice Z: 97;
Pantalla: ninguno;
}
.AlertMessedIvBorder {
Posición: fijo;
_Position: Absoluto;
Ancho: 750px;
Altura: 370px;
Izquierda: 50%;
arriba: 50%;
margen: -185px 0 0 -375px;
Antecedentes:#000;
Filtro: alfa (opacidad = 30);
-Pacilidad de MOZ: 0.3;
Opacidad: 0.3;
Índice Z: 98;
Pantalla: ninguno;
}
.alertMessediv {
Posición: fijo;
_Position: Absoluto;
Ancho: 730px;
Altura: 350px;
Izquierda: 50%;
arriba: 50%;
margen: -175px 0 0 -365px;
Antecedentes: #fff;
Índice Z: 99;
Pantalla: ninguno;
tamaño de fuente: 14px;
}
<div> </div>
<div> </div>
<div> </div>
Cómo cubrir toda la página web con un fondo emergente
1.CSS Método
La copia del código es la siguiente: .alertMessagebg {
Posición: fijo;
_Position: Absoluto;
Ancho: 100%;
Altura: 100%;
Izquierda: 0;
arriba: 0;
Antecedentes:#000;
Opacidad: 0.5;
-Pacilidad de MOZ: 0.5;
Filtro: alfa (opacidad = 50);
Índice Z: 97;
Pantalla: ninguno;
}
2. JS Método
La copia del código es la siguiente: .alertMessagebg {
Posición: Absoluto;
Ancho: 100%;
Altura: 100%;
Izquierda: 0;
arriba: 0;
Antecedentes:#000;
Opacidad: 0.5;
-Pacilidad de MOZ: 0.5;
Filtro: alfa (opacidad = 50);
Índice Z: 97;
Pantalla: ninguno;
}
var bgwidth = document.body.clientwidth + 'px',
bgheight = document.body.clientheight + 'px',
alertBgnode = $ ('. AlertMessAgebg');
alertbgnode.css ({'width': bgwidth, 'altura': bgheight});
Comparando los dos métodos anteriores, es obvio que el método CSS es más fácil de usar, especialmente ahora que no necesita ser compatible con IE6.
Espero que este artículo sea útil para la programación web basada en JS de todos.