Cómo Hacer Una Ventana Emergente En HTML

Tabla de contenido:

Cómo Hacer Una Ventana Emergente En HTML
Cómo Hacer Una Ventana Emergente En HTML

Video: Cómo Hacer Una Ventana Emergente En HTML

Video: Cómo Hacer Una Ventana Emergente En HTML
Video: Cómo mostrar u ocultar una ventana flotante utilizando javascript, html y css 2024, Mayo
Anonim

La creación de una ventana emergente en HTML se realiza mediante la biblioteca jQuery, que le permite integrar un controlador de eventos en una página web y, por lo tanto, hacer posible mostrar el contenido activo del sitio.

Cómo hacer una ventana emergente en HTML
Cómo hacer una ventana emergente en HTML

Instrucciones

Paso 1

Abra la página de su sitio HTML en el editor de texto que usa para escribir el código que desea. También puede utilizar la utilidad Bloc de notas de Windows estándar para insertar una ventana emergente. Para hacer esto, haga clic derecho en el archivo HTML y seleccione "Abrir con" - "Bloc de notas".

Paso 2

En la sección del documento, cree una capa que manejará jQuery:

Paso 3

Luego, debe establecer el nombre de la ventana emergente. Para hacer esto, puede usar los encabezados HTML escalonados:

Título de la ventana

Paso 4

Después de eso, configure el texto que se mostrará en la ventana usando el script para crear un párrafo:

Texto

Paso 5

Luego crea una capa con la clase close_win para cerrar la ventana emergente, antes de cerrar el identificador anterior:

Cerrar una ventana

Paso 6

Incluya la biblioteca jQuery en el archivo agregando la etiqueta requerida entre los descriptores del documento. Por ejemplo:

Paso 7

Después de eso, ingrese el código para mostrar la ventana emergente:

$ (función () {

$ ('# Mostrar'). Hide ();

Paso 8

A continuación, debe controlar el evento en el que el usuario presionó el botón del mouse para invocar la ventana emergente y controlar el cierre de la ventana. Para hacer esto, ingrese el siguiente código:

$ ('# Click-me'). Haga clic en (function () {$ ('# show'). Fadein (300);})

$ ('# Close_win'). Haga clic en (function () {$ ('# show'). FadeOut (300);})

& lt / script>})

Este programa maneja al usuario presionando los botones para abrir la ventana emergente y haciendo clic en el enlace para cerrarla.

Paso 9

Para mostrar la ventana emergente en la página, puede usar el enlace de la clase click-me que se especificó en el código anterior. Para hacer esto, ingrese el siguiente código en el cuerpo del documento:

Haga clic para mostrar la ventana emergente

Recomendado: