Este artículo describe el método de JS+CSS para implementar ventanas emergentes Div y oscurecer el fondo. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <html>
<Evista>
<title> JS+CSS Implementación de la ventana emergente Div, mientras que el fondo se vuelve más oscuro </title>
<script>
función de bloqueo () {
document.all.ly.style.display = "bloque";
document.all.ly.style.width = document.body.clientwidth;
document.all.ly.style.height = document.body.clientHeight;
document.all.layer2.style.display = 'block';
}
función LOCK_CHECKFORM (theForm) {
document.all.ly.style.display = 'ninguno'; document.all.layer2.style.display = 'none';
devolver falso;
}
</script>
<style type = "text/css">
<!-
.Style1 {Font-Size: 12px}
A: enlace {
Color: #000;
Decoración de texto: ninguna;
}
A: Visitado {
Decoración de texto: ninguna;
}
A: Hover {
Decoración de texto: ninguna;
}
A: Activo {
Decoración de texto: ninguna;
}
->
</style>
<meta http-oquiv = "content-type" content = "text/html; charset = gb2312">
</ablo>
<Body>
<p align = "centro">
<input type = "button" value = "popup div" onclick = "locking ()" />
</p>
<div id = "ly" style = "Posición: Absolute; Top: 0px; Filter: Alpha (Opacidad = 60); Color de fondo: #777;
índice z: 2; Izquierda: 0px; Display: Ninguno; ">
</div>
<!-Inicio del marco flotante->
<div id = "Layer2" Align = "Center" Style = "Posición: Absolute; Z-Index: 3; Left: Expression ((Document.Body.OffSetWidth-540)/2); Top: Expression ((Document.Body.OffSetheight-170)/10);
Color de fondo: #fff; Display: Ninguno; ">
<tabla cellPadding = "0" cellPacing = "0" style = "borde: 0 sólido #e7e3e7;
colapso de la frontera: colapso; ">
<tr>
<td style = "de fondo de fondo: #73A2D6; color: #ffff; padding-izquierda: 4px; relleno-top: 2px;
Font-Weight: Bold; Font-size: 12px; "Valign =" Middle ">
<div align = "right"> <a href = javaScript:; onClick = "Lock_checkform (this);"> [Cerrar] </a> </div> </td>
</tr>
<tr>
<td align = "centro">
<br> <br> <hr> <p align = "Center"> <font color = rojo> Estos efectos especiales se recopilan de Internet solo para interés y aprendizaje, y no son para fines comerciales. Fuente: Wulin.com </font> </p>
</td>
</tr>
</table>
</div>
<!-Floating Framework End->
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.