Los pop-ups en HTML son una forma efectiva de destacar contenido importante, captar la atención del usuario o mostrar información relevante de manera prominente. Aunque tradicionalmente se han utilizado scripts de JavaScript para crear pop-ups, hoy te mostraremos cómo hacer un pop up en HTML y CSS.
Básicamente, un pop-up es una ventana emergente que aparece sobre la página web actual. A diferencia de las nuevas ventanas de navegación que se abren con JavaScript, un pop-up HTML se crea utilizando un bloque div con posicionamiento absoluto.
¿Cómo hacer un pop up en HTML y CSS?
El código HTML para un pop up simple
Para construir un pop-up HTML básico, necesitamos dos bloques principales: uno para el panel contenedor y otro para el contenido que queremos mostrar en el pop-up. Aquí tienes un ejemplo de cómo se vería el código HTML:
//¿Cómo hacer un pop up en HTML?
<button onclick="document.getElementById('aviso').setAttribute('data-on','on')">
Mostrar Aviso
</button>
//¿Cómo hacer un pop up en HTML?
<div class="panel" id="aviso" data-on="off" onclick="this.setAttribute('data-on','off')">
<div>
Esto es un panel de comunicación
<p>(Haz clic para cerrar)</p>
</div>
</div>En este código, el botón ejecuta una pequeña instrucción JavaScript que hace visible el bloque del panel de aviso al establecer el atributo data-on en “on”. Cuando se hace clic en cualquier parte del panel de aviso, se ejecuta una instrucción JavaScript que oculta el panel al establecer el atributo data-on en “off”.
El código HTML proporcionado es bastante sencillo pero tiene varias partes importantes que vale la pena entender. Primero, el botón Mostrar Aviso es el elemento que desencadena la aparición del pop-up cuando se hace clic en él. Esto se logra mediante el atributo onclick, que ejecuta una función JavaScript que cambia el estado del pop-up estableciendo el atributo data-on en “on”.
Luego, tenemos el bloque div con la clase panel y el ID aviso, que representa el propio pop-up. Este bloque contiene el mensaje o contenido que queremos mostrar al usuario. El atributo data-on se utiliza para controlar si el pop-up está visible u oculto. Inicialmente, está establecido en “off”, lo que significa que el pop-up está oculto.
Además, hay un evento onclick asociado con este bloque div que también cambia el estado del pop-up cuando se hace clic en él. Cuando se hace clic, se ejecuta una función JavaScript que establece el atributo data-on en “off”, lo que oculta el pop-up nuevamente.
Estilos CSS para estilizar el pop up
Ahora que hemos creado la estructura básica del pop-up en HTML, es hora de aplicar estilos CSS para darle el aspecto deseado. Aquí tienes un ejemplo de cómo podrían ser los estilos CSS:
//¿Cómo hacer un pop up en HTML?
.panel {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
transition: transform 300ms;
z-index: -1;
}
//¿Cómo hacer un pop up en HTML?
.panel div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: beige;
width: 400px;
height: 400px;
z-index: 1000;
}
.panel[data-on='on'] {
transform: scale(1);
}
//¿Cómo hacer un pop up en HTML?
.panel[data-on='off'] {
transform: scale(0);
}Estos estilos CSS se encargan de posicionar el pop-up en el centro de la pantalla, establecer su tamaño y darle un aspecto visual agradable. Además, se utiliza la propiedad transition para crear una animación suave al mostrar u ocultar el pop-up.
Los estilos CSS proporcionados son fundamentales para darle el aspecto deseado al pop-up y mejorar su usabilidad. Comencemos con la clase panel, que se utiliza para el contenedor principal del pop-up. Esta clase establece la posición del pop-up en la pantalla utilizando position: absolute, lo que significa que se colocará en relación con su contenedor principal, en este caso, el cuerpo del documento HTML.
El top, left, right y bottom están configurados en 0, lo que asegura que el pop-up ocupe toda la pantalla. Esto se logra estableciendo su altura y anchura en 100%. La propiedad z-index se establece en -1, lo que coloca el pop-up detrás de otros elementos en la página y evita que se superponga a ellos.
El uso de display: flex, justify-content: center y align-items: center dentro de la clase panel ayuda a centrar el contenido del pop-up tanto horizontal como verticalmente en la pantalla, lo que mejora su apariencia y legibilidad.
Dentro del contenedor del pop-up (div con clase panel), se utiliza otra clase llamada popupContent para estilizar el contenido del pop-up. Aquí, se pueden aplicar estilos adicionales según sea necesario, como cambios en el color de fondo, la tipografía, el espaciado y otros aspectos visuales para que el mensaje o contenido del pop-up sea más atractivo y legible.
Además, se define una transición suave utilizando la propiedad transition, que ayuda a crear un efecto de aparición y desaparición gradual cuando el pop-up se muestra u oculta, lo que mejora la experiencia del usuario y hace que la interacción sea más agradable y fluida.
¿Cómo hacer un pop up automático?
Una pregunta común es cómo hacer que un pop-up se abra automáticamente al cargar la página. Esto se puede lograr utilizando la pseudo-clase :target en CSS. Aquí tienes cómo sería el código CSS modificado:
//¿Cómo hacer un pop up en HTML?
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
//¿Cómo hacer un pop up en HTML?
.overlay:target {
visibility: visible;
opacity: 1;
}Al utilizar la pseudo-clase :target, podemos hacer que el pop-up se muestre automáticamente cuando el ID del pop-up se convierte en el destino de la URL.
Conclusiones
Aprender cómo hacer un pop up en HTML es más simple de lo que parece. Con un poco de HTML y CSS, puedes crear pop-ups atractivos y funcionales sin la necesidad de utilizar JavaScript. Experimenta con diferentes estilos y animaciones para encontrar la apariencia perfecta para tus pop-ups.
Ahora que has aprendido cómo hacer un pop up en HTML, ¡es hora de poner en práctica tus conocimientos y crear pop-ups impresionantes para tu sitio web, también aprender sobre etiquetas en HTML!
Recuerda, en KeepCoding estamos comprometidos a brindarte las herramientas y conocimientos necesarios para destacar en el mundo de la tecnología. ¡Únete a nuestro Bootcamp en desarrollo web y comienza tu viaje hacia una carrera exitosa en el sector IT hoy mismo!
