Las ventanas emergentes para una amplia variedad de propósitos tienen muchos usos en la construcción web. Se pueden utilizar para crear varios tipos de menús, colocar textos y gráficos publicitarios, información sobre herramientas al completar formularios complejos, y es conveniente colocar los propios formularios en ventanas que no ocupen espacio en la página. En nuestro artículo encontrará una descripción de cómo puede hacer una ventana de este tipo.
Es necesario
Conocimientos básicos de HTML
Instrucciones
Paso 1
ventana emergente, html, capa oculta
Paso 2
En muchas páginas de la web, puede ver que se utilizan bibliotecas sofisticadas de varios marcos de JavaScript (jQuery, MooTools, Prototype, etc.) para crear ventanas emergentes en las páginas. Sin embargo, de hecho, no son necesarios para resolver este problema en particular. Las herramientas disponibles en Lenguaje de marcado de hipertexto (HTML) y Hojas de estilo en cascada (CSS) son suficientes para crear ventanas emergentes. Las ventanas creadas de esta manera funcionarán independientemente de si JavaScript está habilitado en el navegador del visitante.
Todo el código que crea la ventana emergente se puede colocar en dos líneas. La primera línea crea un enlace en el que se debe hacer clic para mostrar la ventana emergente:
¡Haga clic aquí!
Aquí, el atributo onmouseover de la etiqueta de enlace establece el tipo de cursor del mouse predeterminado para los enlaces. El atributo onclick especifica que cuando se hace clic en el enlace, el bloque emergente oculto debe hacerse visible.
La segunda línea es, de hecho, la ventana emergente. Capa con el identificador PopUp y el tamaño de la ventana, color y tamaño del texto, fondo y borde especificados en el atributo de estilo:
Este es el texto en la ventana emergente.
No es visible de forma predeterminada; esto se indica mediante el selector de visualización con un valor de none en la descripción del estilo de capa.
En realidad, esto es todo lo que necesita para crear una ventana emergente: coloque estas dos líneas entre las etiquetas y su página y estará lista para funcionar.
Paso 3
Para poder cerrar la ventana emergente frente a la etiqueta, debe agregar un enlace que realice la acción opuesta, ocultando la capa visible con el identificador PopUp:
cerca
Paso 4
Y si desea que la ventana aparezca no haciendo clic, sino colocando el cursor del mouse, entonces la primera línea con el enlace debe modificarse de esta manera:
mueva el ratón aquí!
Paso 5
Ahora está familiarizado con el principio y la estructura del código de la ventana emergente, y el diseño de su apariencia y contenido depende completamente de sus objetivos e imaginación.
