Cómo crear un Pop-up en Bootstrap: Guía completa

Los pop-ups son una herramienta de marketing efectiva con altas tasas de conversión. Puedes crearlos tú mismo con pocas o ninguna habilidad de programación. Descubramos cómo hacer pop-ups y agregarlos al sitio web utilizando Bootstrap y aplicar soluciones alternativas ya preparadas.

Crea una ventana emergente Bootstrap gratuita con más de 800 plantillas de alta conversión

Comenzar

Qué es un Pop-up de Bootstrap

Un pop-up es un marco independiente del sitio web que se muestra sobre el resto del contenido mientras se descarga el sitio, bloqueándolo temporalmente para llamar la atención sobre un mensaje en particular. Los ejemplos incluyen anuncios, recordatorios sobre compras pendientes, ofertas para suscribirse a actualizaciones, solicitudes para guardar un archivo, etc.

Pop-up Bootstrap es un conjunto de herramientas gratuito diseñado para crear aplicaciones web y sitios web dinámicos modernos. Consiste en plantillas escritas en los lenguajes de marcado HTML y CSS y extensiones de JavaScript.

Así, utilizando JavaScript puedes crear pop-ups modales que están ligados a un evento específico, como cuando, por ejemplo, el puntero del mouse sale del marco principal o cuando expira cierto tiempo. Usando el plugin de Bootstrap, puedes obtener elementos que realicen las siguientes funciones:

ofrecer ir a una sala de chat u ordenar una devolución de llamada;
recopilar datos para la segmentación de clientes;
proporcionar información de ayuda y referencia;
mostrar contenido multimedia a pantalla completa;
promocionar productos y servicios;
ofrecer registrarse para usar todas las funciones del sitio;
ayudar a un visitante a encontrar la información que necesita, etc.

Bootstrap te permite crear herramientas de marketing convenientes y efectivas. Ayudan a enfocar la atención del visitante en una oferta específica y llevarlo a realizar la acción deseada. Incluso un poco de conocimiento de los lenguajes de programación mencionados anteriormente te da la oportunidad de aumentar significativamente la tasa de conversión y mejorar el desempeño financiero del negocio.

popup-bootstrap

Cómo Crear un Formulario Pop-up en Bootstrap

Crear una ventana pop-up no requiere habilidades de programación, porque puedes extraer fragmentos de código ya hechos de los repositorios. Descubramos cómo crear una ventana pop-up usando Bootstrap con un conjunto mínimo de elementos funcionales.

Ejemplo para Crear un Pop-up en Bootstrap

Antes de comenzar a crear un formulario pop-up en Bootstrap, necesitas asegurarte de que tu sitio web cumple con los requisitos del plugin. Estos deben ser considerados para cada versión específica de la herramienta. Por ejemplo, para conectar el Bootstrap 5.3 actual, debes usar el lenguaje de marcado HTML5 con el diseño adaptativo que permite ajustar la ventana a los parámetros de cualquier pantalla.

La forma más fácil de activar Bootstrap es agregar un fragmento de código que contenga direcciones de plantillas CSS y bibliotecas de JavaScript en la sección <head>:

<link href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

También puedes descargar una distribución ya hecha de GitHub para integrarla en tu entorno de desarrollo. Los desarrolladores también ofrecen otras opciones de instalación, como gestores de paquetes.

Cómo Crear una Ventana Pop-up Usando Bootstrap y JavaScript

Los desarrolladores de Bootstrap ofrecen el siguiente ejemplo para evaluar las capacidades de su herramienta.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

Lanzar demo modal

</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título del Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
<h5 class="text-center mb-5">Inserte su texto aquí</h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

Este fragmento de código genera una pequeña ventana emergente con un texto y dos botones. Se aplica una simple animación: el marco desciende desde arriba, adquiriendo gradualmente características. Se cierra si presiona el botón correspondiente o simplemente hace clic en el fondo. En ambos casos, la ventana sube y se oscurece, desapareciendo completamente.

Echemos un vistazo más de cerca a este ejemplo.

Llamada a una ventana emergente

El ejemplo usa la opción más simple — llamar a la ventana emergente con un botón. Esto es útil si ofrece al visitante un formulario de registro o ayuda para usar una función específica. El siguiente fragmento es responsable de lanzar el código:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

Lanzar demo modal

</button>

¿Quieres que la ventana se abra automáticamente? Entonces tendrás que sumergirte en el estudio de JavaScript. Por ejemplo, puedes usar el siguiente script para iniciar la función 2 segundos después de que se descargue la página:

$(window).load(function(){
   setTimeout(function(){
       $('#myModal').modal('show');
   }, 2000);
});

Otra opción popular es llamar a una ventana emergente cuando el cursor del ratón sale del marco principal de la pantalla. Al darse cuenta de que un usuario está a punto de cerrar la pestaña, muéstrale la frase final. Este script se usa para este propósito:

<script>
    function addEvent(obj, evt, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(evt, fn, false);
        } else if (obj.attachEvent) {
            obj.attachEvent("on" + evt, fn);
        }    }    addEvent(document, 'mouseout', function (evt) {
        var modalId = 'exitModal';
        if (evt.toElement === null && evt.relatedTarget === null && !localStorage.getItem('modal.' + modalId)) {
            var modal = new bootstrap.Modal('#' + modalId);
            modal.show();
            localStorage.setItem('modal.' + modalId, '1');
        }
    });
</script>

El bloque "Modal"

Entonces, cómo hacer que el modal popup sea adaptable en bootstrap.

La ventana emergente en nuestro ejemplo consta de tres partes:

encabezado con el nombre;

<div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título del Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

ventana principal con una descripción de texto;

<div class="modal-body">

<h5 class="text-center mb-5">Insert your text here</h5>

</div>

footer with buttons.

 <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

Esta categorización es estándar para pop-ups creados con Bootstrap. Sin embargo, puedes rellenar cada parte a tu propia discreción, utilizando numerosos elementos funcionales de las librerías del plugin.

Modificaciones de la ventana emergente

El código descrito anteriormente será suficiente para crear herramientas de marketing simples. Pero puedes obtener mucho más personalizando los marcos.

Por ejemplo, el siguiente fragmento te permite establecer un cierto tamaño de una ventana emergente:

<div class="modal-dialog modal-OO">...</div>,

donde OO es la variable que especifica el formato deseado y puede tomar los siguientes valores:

sm — corresponde a un ancho de 320 píxeles;
lg — 800 píxeles;
xl — 1140 píxeles.

Si omites la variable de tamaño, una ventana emergente de 500 píxeles aparecerá en la pantalla por defecto. Para estirar el marco a pantalla completa, usa el siguiente código:

<div class="modal-dialog modal-fullscreen">

Si deseas cambiar la animación de una ventana emergente, presta atención a la variable modal-fade. Las librerías de Bootstrap ofrecen una variedad de efectos. Por ejemplo, si deseas que el marco haga zoom como una cámara, inserta el siguiente fragmento de código:

<div class="modal fade2" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Para que la animación funcione correctamente, también necesitarás configurar estilos CSS y crear el script apropiado:

.fade2 {
    transform: scale(0.9);
    opacity: 0;
    transition: all .2s linear;
    display: block !important;
}
.fade2.show {
    opacity: 1;
    transform: scale(1);
}
и
$('#exampleModal').modal();
function afterModalTransition(e) {
  e.setAttribute("style", "display: none !important;");
}
$('#exampleModal').on('hide.bs.modal', function (e) {
    setTimeout( () => afterModalTransition(this), 200);
})

Otra característica interesante disponible en Bootstrap es bloquear una ventana emergente. No permite cerrar el marco haciendo clic en el fondo o presionando Esc. Para ir al contenido del sitio web, un usuario tiene que realizar una acción específica, como registrarse después de que expire el período de prueba. En este caso se usa el siguiente código:

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

Cómo Crear un Pop-up con Claspo

Si necesitas un elemento visual más llamativo y atractivo, puedes usar una solución lista para crear pop-ups.

Una de las opciones más convenientes es la herramienta Claspo.io. Te permite crear pop-ups de cualquier nivel de complejidad sin ningún conocimiento de lenguajes de programación — se hacen según el principio de "constructor" arrastrando varios elementos a la pantalla. Aprendamos más sobre cómo crear un pop-up usando Claspo.

Prueba todas las funciones avanzadas con el plan gratuito de por vida de Claspo

Comenzar

Paso 1: Registro

Ve a Claspo y crea una cuenta. También puedes iniciar sesión usando redes sociales o tu cuenta de Google.

Elige un plan de tarifa adecuado. Puedes familiarizarte con la funcionalidad de Claspo de forma gratuita — en este caso, están disponibles tres widgets en un sitio con un número total de vistas de hasta 30 mil por mes. Además, una ventana emergente proporcionará un enlace a la herramienta web.

Los planes de tarifas de Claspo son asequibles y flexibles en comparación con otros servicios. Elige la mejor opción para tu negocio sin pagar de más por funciones y vistas adicionales.

Paso 2: Crear una ventana emergente

Claspo te guía a través de los siguientes pasos:

definir el propósito — especifica qué función quieres implementar;

define-the-purpose

seleccionar el formato — una ventana clásica, un banner, un marco flotante, etc.;

select-the-format

configuración del estilo — elige el diseño que corresponda al diseño de tu sitio web;
elección de plantilla — la ventana emergente toma una forma completa;

choice-of-template

contenido — arrastra y suelta elementos funcionales en el marco, ingresa texto, agrega imágenes, etc.

content

La ventaja de la herramienta es que en pocos minutos puedes crear no solo una ventana básica con un trozo de texto, sino un elemento visual brillante que atrae la atención del visitante y proporciona altas tasas de conversión.

сreate-pop-up-window

Paso 3: Integración

integration

Cuando creas una ventana emergente, obtienes un script que enlaza con las propias bibliotecas de Claspo. Puedes integrarlo tú mismo — la herramienta proporciona un código listo y te ayuda a encontrar dónde insertarlo. También está disponible la integración con los sistemas de gestión de contenido (CMS) más populares, incluyendo WordPress.

Paso 4: Lanzamiento

Una vez integrado en el código de tu sitio, el pop-up comenzará a funcionar de inmediato. Adminístralo en la interfaz web de Claspo, cambiando la configuración si es necesario y obteniendo estadísticas detalladas. La herramienta también es compatible con CRM y otros programas corporativos. Su integración profunda te permite crear ofertas personalizadas para cada visitante del sitio según el historial de actividad o la segmentación por diversas características.

Cómo generar rápidamente una ventana emergente en el sitio: conclusión

Usando pop-up Bootstrap, puedes generar rápidamente ventanas emergentes, gestionando de manera flexible su contenido, tamaños, funciones e incluso animaciones de visualización. Serán suficientes conocimientos básicos de programación para realizar las tareas más simples, ya que la mayor parte del código puede obtenerse de repositorios de código abierto como GitHub.

Pero si buscas una herramienta de conversión efectiva para tu sitio web, vale la pena usar la solución llave en mano de Claspo. ¡Puedes crear pop-ups brillantes y funcionales rápida y fácilmente sin ningún conocimiento de código! Estos se ensamblan según el principio del constructor, eligiendo el diseño y el contenido, y la herramienta los adapta a todos los dispositivos, pantallas y navegadores.

¡Puedes probar todas las funciones de Claspo de forma gratuita! ¡Regístrate ahora para evaluar el potencial de la herramienta y elegir la mejor versión de pop ups inteligentes para tu negocio!

Crea tu ventana emergente de alta conversión con Claspo

Comenzar