declaración
Leer este artículo requiere un cierto HTML básico, CSS y JavaScript
diseño
La idea de lograr el efecto de la capa emergente es muy simple: oculte el contenido que se mostrará primero y muestra el contenido oculto originalmente después de activar una determinada condición (como hacer clic en un botón).
lograr
<!DOCTYPE html><html><head> <title>Window object</title> <meta charset="utf-8"></head><body><a href="http://www.baidu.com">Baidu</a><button type="button" id="open">Open the pop-up layer</button><div style="display: none;background: LightBlue; borde: 1px verde sólido "; id = "Toast"> <!-Establezca el atributo de visualización en Ninguno para ocultar el contenido-> <p> Este es el contenido de la capa emergente </p> <botón tipo = "botón" id = "cerrar"> Cerrar la capa emergente </botton> </div> <script type = "text/javaScript"> var toast = document.getElementByid ("toast");; document.getElementById ("Open"). onClick = function (e) {<!-Defina el evento de clic para mostrar contenido oculto-> toast.style.display = "bloque"; toast.style.position = "fijo"; var winwidth = window.innerWidth; var winHeight = window.innerHeight; var TargetWidth = toast.OffSetWidth; var Targetheight = toast.offsetheight; toast.style.top = (winheight - targetheight) / 2 + "px"; toast.style.left = (WinWidth - TargetWidth) / 2 + "Px"; } document.getElementById ("cerrar"). onClick = function (e) {<!-ocultar el contenido mostrado nuevamente-> toast.style.display = "none"; } </script> </body> </html>El efecto de visualización es el siguiente:
Pero podemos notar que después de que aparece el contenido oculto, aún podemos ingresar a la página de Baidu a través del enlace. Para evitar que esto suceda, podemos proporcionar una capa de máscara para cubrir todo el contenido de la página original. El código es el siguiente:
<! Doctype html> <html> <fead> <title> Objetor de la ventana </title> <meta charset = "utf-8"> </head> <body> <a href = "http://www.baidu.com"> baidu </a> <button type = "button" id = "abierto> la capa emergente </button> <button de dividi =" Ninguna; posición: fijo; ancho: 100%; altura: 100%; arriba: 0px; izquierda: 0px; fondo: gris; "> <!-enmascarar el fondo a través de la capa de máscara-> <Div style =" fondo: LightBlue; borde: 1px sólido verde; " id = "Toast"> <!-Establezca el atributo de visualización a ninguno para ocultar el contenido-> <p> Aquí está el contenido de la capa emergente </p> <button type = "button" id = "cerrar"> Cerrar la capa emergente </botón> </div> </div> <script type = "text/javascript"> var toast = document.getEmementByid ("toast");;;; var cubre = document.getElementById ("cubierta"); document.getElementById ("Open"). onClick = function (e) {<!-Defina el evento de clic para mostrar contenido oculto-> cover.style.display = "bloque"; toast.style.position = "fijo"; var winwidth = window.innerWidth; var winHeight = window.innerHeight; var TargetWidth = toast.OffSetWidth; var Targetheight = toast.offsetheight; toast.style.top = (winheight - targetheight) / 2 + "px"; toast.style.left = (WinWidth - TargetWidth) / 2 + "Px"; } document.getElementById ("cerrar"). onClick = function (e) {<!-ocultar el contenido mostrado nuevamente-> cover.style.display = "none"; } </script> </body> </html>Este es el siguiente resultado de la prueba nuevamente, como se muestra en la figura a continuación:
Resumir
El contenido anterior simplemente implementa el efecto de capa emergente, pero al agregar más código, se pueden implementar funciones más complejas sobre esta base.
El ejemplo simple anterior de usar JavaScript para lograr el efecto de capa emergente es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.