Como criar um Pop-up Bootstrap: Guia completo

Pop-ups são uma ferramenta de marketing eficaz com altas taxas de conversão. Você pode criá-los sozinho com poucas ou nenhumas habilidades de programação. Vamos descobrir como fazer pop-ups e adicioná-los ao site usando Bootstrap e aplicar soluções alternativas prontas.

Crie um pop-up Bootstrap gratuito com mais de 800 modelos de alta conversão

Começar

O Que é um Pop-up Bootstrap

Um pop-up é uma janela separada do site que é exibida sobre o restante do conteúdo enquanto o site está carregando, bloqueando-o temporariamente para chamar a atenção para uma mensagem específica. Exemplos incluem anúncios, lembretes sobre compras pendentes, ofertas para assinar atualizações, solicitações para salvar um arquivo, etc.

O Pop-up Bootstrap é um kit de ferramentas gratuito projetado para criar aplicativos web e sites dinâmicos modernos. Consiste em templates escritos nas linguagens de marcação HTML e CSS e extensões JavaScript.

Assim, usando JavaScript, você pode criar pop-ups modais que estão vinculados a um evento específico, como quando, por exemplo, o ponteiro do mouse sai da janela principal ou quando um certo tempo expira. Usando o plugin Bootstrap, você pode obter elementos que executam as seguintes funções:

oferecer ir a uma sala de chat ou solicitar um retorno de chamada;
coletar dados para segmentação de clientes;
fornecer ajuda e informações de referência;
exibir conteúdo multimídia em visualização completa;
promover produtos e serviços;
oferecer registro para usar todos os recursos do site;
ajudar um visitante a encontrar as informações de que ele ou ela precisa, etc.

Bootstrap permite criar ferramentas de marketing convenientes e eficazes. Elas ajudam a focar a atenção do visitante em uma oferta específica e conduzir o visitante à ação alvo. Mesmo um pouco do conhecimento das linguagens de programação mencionadas anteriormente dá a oportunidade de aumentar significativamente a taxa de conversão e melhorar o desempenho financeiro do negócio.

popup-bootstrap

Como Criar um Formulário Pop-up no Bootstrap

Criar uma janela pop-up não requer habilidades de programação, pois você pode extrair trechos de código prontos dos repositórios. Vamos descobrir como criar uma janela pop-up usando Bootstrap com um conjunto mínimo de elementos funcionais.

Exemplo de Criação de Pop-up Bootstrap

Antes de começar a criar um formulário pop-up no Bootstrap, você precisa garantir que seu site atenda aos requisitos do plugin. Eles devem ser considerados para cada versão específica da ferramenta. Por exemplo, para conectar o Bootstrap 5.3 atual, você deve usar a linguagem de marcação HTML5 com design adaptativo que permite ajustar a janela aos parâmetros de qualquer tela.

A maneira mais fácil de ativar o Bootstrap é adicionar um trecho de código contendo endereços de template CSS e bibliotecas JavaScript à seção <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>

Você também pode baixar uma distribuição pronta do GitHub para integrar ao seu ambiente de desenvolvimento. Os desenvolvedores também oferecem outras opções de instalação, como gerenciadores de pacotes.

Como Criar uma Janela Pop-up Usando Bootstrap e JavaScript

Os desenvolvedores do Bootstrap oferecem o seguinte exemplo para avaliar as capacidades de sua ferramenta.

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

Lançar modal de demonstração

</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 do 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">Insira seu texto aqui</h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Salvar mudanças</button>
      </div>
    </div>
  </div>
</div>

Este trecho de código gera uma pequena janela pop-up com um texto e dois botões. Uma animação simples é aplicada a ela — a moldura desce de cima, adquirindo gradualmente características. Ela fecha se você pressionar o botão correspondente ou simplesmente clicar no fundo. Em ambos os casos, a janela sobe e escurece, desaparecendo completamente.

Vamos dar uma olhada mais de perto neste exemplo.

Chamando uma janela pop-up

O exemplo usa a opção mais simples — chamar a janela pop-up com um botão. Isso é útil se você oferecer ao visitante um formulário de registro ou ajuda sobre como usar uma função específica. O seguinte trecho é responsável pelo lançamento do código:

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

Lançar modal de demonstração

</button>

Quer que a janela seja aberta automaticamente? Então você terá que se aprofundar no estudo do JavaScript. Por exemplo, você pode usar o seguinte script para iniciar a função 2 segundos após o carregamento da página:

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

Outra opção popular é chamar uma janela pop-up quando o cursor do mouse sai do quadro principal. Ao perceber que um usuário está prestes a fechar a aba, mostre a frase final. Este script é usado para esse 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>

O bloco "Modal"

Então, como fazer uma pop-up modal responsiva no Bootstrap.

A janela pop-up no nosso exemplo consiste em três partes:

cabeçalho com o nome;

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

janela principal com uma descrição de texto;

<div class="modal-body">

<h5 class="text-center mb-5">Insira seu texto aqui</h5>

</div>

rodapé com botões.

 <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Salvar alterações</button>
      </div>

Esta categorização é padrão para pop-ups criados com Bootstrap. No entanto, você pode preencher cada parte à sua própria discrição, utilizando inúmeros elementos funcionais das bibliotecas de plugins.

Modificações na janela pop-up

O código descrito acima será suficiente para criar ferramentas de marketing simples. Mas você pode obter muito mais personalizando os quadros.

Por exemplo, o trecho a seguir permite definir um certo tamanho para uma janela pop-up:

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

onde OO é a variável que especifica o formato desejado e pode assumir os seguintes valores:

sm — corresponde a uma largura de 320 pixels;
lg — 800 pixels;
xl — 1140 pixels.

Se você omitir a variável de tamanho, uma janela pop-up de 500 pixels aparecerá na tela por padrão. Para estender o quadro para tela cheia, use o seguinte código:

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

Se você quiser alterar a animação de uma janela pop-up, preste atenção à variável modal-fade. As bibliotecas Bootstrap oferecem uma variedade de efeitos. Por exemplo, se você quiser que o quadro aumente como um zoom de câmera, insira o seguinte trecho de código:

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

Para que a animação funcione corretamente, você também precisará configurar estilos CSS e criar o script apropriado:

.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);
})

Outra interessante funcionalidade disponível no Bootstrap é bloquear uma janela pop-up. Isso não permite você fechar o quadro clicando no fundo ou pressionando Esc. Para acessar o conteúdo do site, o usuário precisa realizar uma ação direcionada, como registrar-se depois que o período de teste expira. Neste caso, utiliza-se o seguinte código:

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

Como Criar um Pop-up com Claspo

Se você precisa de um elemento visual mais brilhante e chamativo, pode usar uma solução pronta para criar pop-ups.

Uma das opções mais convenientes é a ferramenta Claspo.io. Ela permite criar pop-ups de qualquer nível de complexidade sem nenhum conhecimento de linguagens de programação — eles são feitos de acordo com o princípio do "construtor", arrastando vários elementos para a tela. Vamos aprender mais sobre como criar um pop-up usando o Claspo.

Experimente todos os recursos avançados com o plano gratuito vitalício da Claspo

Começar

Passo 1: Registro

Acesse Claspo e crie uma conta. Você também pode entrar usando redes sociais ou sua conta Google.

Escolha um plano tarifário adequado. Você pode se familiarizar com a funcionalidade do Claspo gratuitamente — neste caso, três widgets em um site com um número total de visualizações de até 30 mil por mês estão disponíveis. Além disso, uma janela pop-up fornecerá um link para a ferramenta web.

Os planos tarifários do Claspo são acessíveis e flexíveis em comparação com outros serviços. Escolha a melhor opção para o seu negócio sem pagar a mais por recursos e visualizações extras.

Passo 2: Crie uma janela pop-up

O Claspo orienta você pelos seguintes passos:

definir o propósito — especifique qual função você deseja implementar;

definir-o-propósito

selecionar o formato — uma janela clássica, um banner, uma moldura flutuante, etc;

selecionar-o-formato

configuração do estilo — escolha o design que corresponde ao design do seu site;
escolha do modelo — a janela pop-up toma uma forma completa;

escolha-do-modelo

conteúdo — arraste e solte elementos funcionais na moldura, insira texto, adicione imagens, etc.

conteúdo

A vantagem da ferramenta é que em poucos minutos você pode criar não apenas uma janela básica com um pedaço de texto, mas um elemento visual brilhante que atrai a atenção do visitante e proporciona altas taxas de conversão.

criar-janela-pop-up

Passo 3: Integração

integração

Quando você cria um pop-up, você obtém um script que se conecta às bibliotecas próprias do Claspo. Você pode integrá-lo sozinho — a ferramenta fornece o código pronto e ajuda a encontrar onde inseri-lo. A integração com a maioria dos sistemas de gerenciamento de conteúdo (CMS), incluindo WordPress, também está disponível.

Passo 4: Iniciar

Uma vez integrado no código do seu site, o pop-up começará a funcionar imediatamente. Gerencie-o na interface web do Claspo, alterando as configurações, se necessário, e obtendo estatísticas detalhadas. A ferramenta também é compatível com CRM e outros softwares corporativos. Sua integração profunda permite criar ofertas personalizadas para cada visitante do site com base no histórico de atividades ou segmentação por várias características.

Como gerar rapidamente uma janela pop-up no site: conclusão

Com o uso do Bootstrap de pop-up, você pode gerar rapidamente janelas pop-up, gerenciando de forma flexível seu conteúdo, tamanhos, funções e até animações de exibição. Habilidades básicas de programação serão suficientes para realizar as tarefas mais simples, pois a maior parte do código pode ser obtida de repositórios de código aberto, como o GitHub.

Mas se você está procurando uma ferramenta de conversão eficaz para o seu site, vale a pena usar a solução turnkey do Claspo. Você pode criar pop-ups brilhantes e funcionais rápida e facilmente, sem nenhum conhecimento de código! Eles são montados de acordo com o princípio do construtor, escolhendo o design e o conteúdo, e a ferramenta os adapta a todos os dispositivos, telas e navegadores.

Você pode experimentar todas as funcionalidades do Claspo gratuitamente! Inscreva-se agora para avaliar o potencial da ferramenta e escolher a melhor versão de pop-ups inteligentes para o seu negócio!

Crie seu pop-up de alta conversão com Claspo

Começar