Cómo hacer una ventana emergente

¿Ha iniciado recientemente su propio sitio web y le gustaría activar un mensaje emergente para sus visitantes? ¿Quizás porque tienes una oferta que proponer o simplemente porque quieres comunicar noticias importantes? Pero hay un problema: eres principiante y no tienes idea de cómo hacerlo. ¿Estoy en lo cierto?

Te tengo una fantástica noticia, porque si quieres aprender a hacer un pop-up has elegido la guía adecuada para lograr tu objetivo. En este tutorial te lo explicaré de forma sencilla. cómo hacer una ventana emergente usando HTML, pero también cómo bloquear o desbloquear ventanas emergentes en todos los dispositivos. ¿Como? ¿No sabes de qué estoy hablando? Te lo explicaré de la forma más básica posible, así que no temas si no eres programador.

Como todo, se necesita un poco de paciencia, por lo que mi único pedido es que te pongas cómodo y leas atentamente los siguientes párrafos. Estoy seguro de que al final del tutorial podrás dominar la integración de una ventana emergente dentro de un sitio web.

Índice

Cómo hacer una ventana emergente en HTML

Permítanme tocar brevemente el idioma. HTMLdiciéndole que lo que está leyendo ahora en realidad proviene de una fuente en HTML. Acrónimo de Lenguaje de marcado de hipertexto;, este idioma se llama "calificación" y no es un lenguaje de programación como mucha gente piensa. Para funcionar correctamente, HTML necesita encerrar los elementos entre dos etiquetas definido a través de la paréntesis angulares (< >).

Te voy a resumir brevemente: elHTML es un lenguaje que se utiliza para clasificar y posicionar elementos (enlace, texto, video, imagen) dentro de una página, proporcionando una estructura vital para cada sitio web o aplicación. el código viene interpretado por un software (por ejemplo, el navegador) y se presenta en forma visual para el usuario.

Es mi deber informarles que elHTML por sí solo no es suficiente para definir el estilo crear una ventana emergente. Para ello es necesario pedir la ayuda del lenguaje. javascript et al CSS o, precisamente, hoja de estilo. No quiero ir más lejos, así que te invito a que le eches un vistazo a este tutorial sobre cómo crear un sitio web en HTML, aquí te explicaré detalladamente cómo interactúan los diferentes tipos de lenguajes entre sí.

¡Tomemos acción! Abra el editor de texto disponible en su sistema operativo, por así decirlo. Block de notas De ventanaso Editar texto Para Mac. De lo contrario, puedes probar el código con un software especial como Virtual Studio Code.

Ahora copia esto código y pégalo en el tuyo editor de texto. No te preocupes, te explicaré su estructura más adelante.

<!DOCTYPE html>
<html lang="it">
<head>
<title>Come fare un pop-up</title>
<link rel="stylesheet" type="text/css" href="https://www.aranzulla.it/style.css">
</head>
<body>
<h1>Come fare un pop-up seguendo i tutorial di aranzulla.it</h1>
<div class="overlay" id="pop">
<div class="popup">
<h2>Wow! Ho creato un popup</h2>
<p>Non credevo fosse così facile</p>
<span id="close">X</span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

Todo lo que tienes que hacer es crear una carpeta en su computadora y guarde el archivo asegurándose de darle una extensión .html (por ejemplo, My-pop-up.html) dentro de él. De esta manera puedes probar tu código en el navegador simplemente haciendo doble clic en el archivo. Nada especial, ¿no? De hecho, has escrito tu primer fragmento de código para que puedas descubrir cómo crear una ventana emergente en HTML.

Cómo hacer una ventana emergente

En la primera línea de código declaramos el tipo de documento mediante la etiqueta en el siguiente se abrió la etiqueta y este es el primer paso fundamental: esa etiqueta lo abarca todo lo que está definido en el código de su página.

La etiqueta es otro elemento básico de toda estructura html y será fundamental que definas muchos parámetros, en nuestro caso hemos definido el título mediante la etiqueta . Como puedes ver, la etiqueta de un elemento siempre se cierra al insertarlo barra oblicua (/) después soporte del primer ánguloesto es obligatorio para poder devolver el valor al navegador y permitirle "traducirlo".

Ahora seguramente te estarás preguntando qué significa la quinta línea. . Este comando invoca el hoja CSS que crearemos más adelante para personalizar el tuyo ventanas emergentes. Dejemos esto a un lado por ahora y cerremos la etiqueta. .

La sección es el que contiene el contenido dentro del cuerpo de tu página, ya sea una ventana emergente o un formulario. Suele servir para definir lo que realmente verá el usuario en la pantalla. Con H1 asigne un título, luego inserte dos etiquetas

que necesitarás para organizar el diseño de tu ventana emergente. El primer div (división) indica lacubriral que le asignamos elidentificación popmientras que el segundo va a recordar el ventana emergente.

A continuación puede encontrar un subtítulo en H2 seguido de un pequeño párrafo, indicado con la etiqueta

. Inmediatamente debajo verás una etiqueta. , es decir, un marcado que recuerda un elemento en línea. A diferencia del

que divide el espacio en bloques, la etiqueta sólo puede definir elementos en línea. En este caso simplemente definimos el botón de cerrar. ventanas emergentesidentificándolo con un X.

Una vez que los dos cerraron

que creamos anteriormente, inserte la etiqueta que nos ayudará a recordar el elemento javascript. En nuestro caso, a través de recordamos un archivo específico. Explicaré su utilidad y cómo integrarlo más adelante.

Como puede ver, en realidad utilizamos tres lenguajes diferentes para crear el marco del ventanas emergentes. El primero, HTML, nos permitía estructurar lo que necesitábamos, pero ahora necesariamente tenemos que recurrir a otros dos códigos: un hoja de estilo y un archivo Javascript. Entonces, ¿qué hemos hecho en este capítulo? Creamos el pagina basicadefinió que usaremos un cubrirdefinió que usaremos un ventana emergente y declaró los enlaces a los archivos CSS Y JavaScript. ¿Está todo claro hasta aquí? Estoy seguro que sí.

CSS de la ventana emergente

ya conoces la etiqueta que hemos insertado dentro del de nuestra hoja html? Debes saber que esta cadena se utiliza para recuperar la hoja de estilo, es decir, el documento que contiene toda la información desde el punto de vista. gráfico Y estilístico de nuestra criatura.

En esta línea, de hecho, le hemos dicho al navegador (o a quien sea) que haga referencia a un archivo llamado estilo.css, por lo tanto, copie el código que puse a continuación en un nuevo archivo de texto y guárdelo con la misma extensión. Asegúrate de guardarlo en la misma carpeta que contiene el documento .html.

 body{
    background: #add2ee;
    color: #fff;
    text-align: center;
 }

.popup{
   width: 250px;
   height: 200px;
   background: linear-gradient(rgb(255, 255, 255), rgb(0, 0, 255));
   border-radius: 20%;
   margin: 40px auto;
   padding: 20px 20px;
   position: relative;
   color: #b11414;
   }

.overlay{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   height: 100vh;
   background: rgba(41, 178, 14, 0.7);
   text-align: center;
   display: none; 
   }

#close{
   position: absolute;
   top: -20px;
   right: -20px;
   color: #002aff;
   }

#close:hover{
   cursor: pointer;
}

Echando un vistazo a este código podrás entender fácilmente cómo se relaciona cada sección con estructura HTML definido anteriormente. En el caso .surgir Y .cubrir están conectados a los dos que hemos definido dentro del HTML. Aquí podrás definir las características del tuyo ventanas emergentes modificando los parámetros ya presentes. La cuerda "cerca{"se refiere al botón de cerrar que configuramos a través de la etiqueta mientras que la cerrar: flotar indica que al pasar el mouse sobre el Xel cursor cambiará al clásico puntero de mano.

Como puedes ver, todo empieza a tener sentido, ¿verdad? A través de CSS Puedes ser creativo añadiendo más parámetros, pero este código es definitivamente suficiente para empezar. ¿Lo entendí bien? te estas preguntando cómo hacer una ventana emergente que se activa en un momento determinado? ¡Por supuesto! Te lo explicaré en el próximo capítulo.

JavaScript de la ventana emergente

Todo esta bien ventanas emergentes el respeto por uno mismo necesita un desencadenantes, o una entrada que le indique cuándo aparecer. Hay muchos tipos de ventanas emergentes y uno de los muchos ejemplos es laventana emergente de intención de salidaes decir, una ventana que recibe el desencadenantes una vez que te acercas al cierre de una página web con el mouse. En nuestro caso, sin embargo, te mostraré cómo hacer que aparezca ventanas emergentes Después 1 segundo (1000 milisegundos) desde el momento en que el visitante abre la página web.

Para que esto suceda, el lenguaje viene en nuestra ayuda javascript, porque es capaz de definir prácticamente cualquier tipo de interacción. Por lo tanto es uno de los lenguajes más utilizados para la creación de páginas dinámicasal igual que el ventanas emergentes que estamos creando. Pegue el siguiente código en un archivo de texto al que nombrará aplicación.js (definimos este nombre en la etiqueta