Come creare un Pop-up Bootstrap: Guida completa

I pop-up sono uno strumento di marketing efficace con alti tassi di conversione. Puoi crearli da solo con poche o nessuna competenza di programmazione. Scopriamo come realizzare pop-up e aggiungerli al sito web utilizzando Bootstrap e applicando soluzioni alternative già pronte.

Crea un pop-up Bootstrap gratuito con oltre 800 modelli ad alta conversione

Inizia

Che cos'è un Pop-up Bootstrap

Un pop-up è una cornice separata del sito web che viene visualizzata sopra il resto del contenuto mentre il sito è in fase di caricamento, bloccandolo temporaneamente per attirare l'attenzione su un messaggio particolare. Esempi includono pubblicità, promemoria sugli acquisti in sospeso, offerte per iscriversi agli aggiornamenti, richieste di salvare un file, ecc.

Il pop-up Bootstrap è un toolkit gratuito progettato per creare applicazioni web e siti web dinamici moderni. Consiste in modelli scritti nei linguaggi di markup HTML e CSS e estensioni JavaScript.

Quindi, utilizzando JavaScript, puoi creare pop-up modali legati a un evento specifico, come ad esempio quando il puntatore del mouse esce dalla cornice principale o quando scade un certo tempo. Utilizzando il plugin Bootstrap, puoi ottenere elementi che svolgono le seguenti funzioni:

offrire di entrare in una chat room o ordinare una richiamata;
raccogliere dati per la segmentazione dei clienti;
fornire assistenza e informazioni di riferimento;
visualizzare contenuti multimediali a schermo intero;
promuovere prodotti e servizi;
offrire di registrarsi per utilizzare tutte le funzionalità del sito;
aiutare un visitatore a trovare le informazioni di cui ha bisogno, ecc.

Bootstrap ti consente di creare strumenti di marketing comodi ed efficaci. Aiutano a focalizzare l'attenzione di un visitatore su un'offerta specifica e a indirizzare un visitatore verso l'azione target. Anche una minima conoscenza dei linguaggi di programmazione sopra menzionati offre l'opportunità di aumentare significativamente il tasso di conversione e migliorare le prestazioni finanziarie dell'azienda.

popup-bootstrap

Come Creare un Modulo Pop-up in Bootstrap

La creazione di una finestra pop-up non richiede alcuna competenza di programmazione, poiché puoi estrarre frammenti di codice pronti dai repository. Vediamo come creare una finestra pop-up utilizzando Bootstrap con un set minimo di elementi funzionali.

Esempio di Creazione di un Pop-up Bootstrap

Prima di iniziare a creare un modulo pop-up in Bootstrap, devi assicurarti che il tuo sito web soddisfi i requisiti del plugin. Questi dovrebbero essere considerati per ciascuna versione specifica dell'utensile. Ad esempio, per collegare l'attuale Bootstrap 5.3, dovresti usare il linguaggio di markup HTML5 con il design adattivo che consente di adattare la finestra ai parametri di qualsiasi schermo.

Il modo più semplice per attivare Bootstrap è aggiungere un frammento di codice contenente gli indirizzi dei template CSS e le librerie JavaScript alla sezione <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>

Puoi anche scaricare una distribuzione pronta da GitHub da integrare nel tuo ambiente di sviluppo. Gli sviluppatori offrono anche altre opzioni di installazione, come i gestori di pacchetti.

Come Creare una Finestra Pop-up Usando Bootstrap e JavaScript

Gli sviluppatori di Bootstrap offrono il seguente esempio per valutare le capacità del loro strumento.

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

Launch 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">Titolo 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">Inserisci qui il tuo testo</h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
        <button type="button" class="btn btn-primary">Salva cambiamenti</button>
      </div>
    </div>
  </div>
</div>

Questo frammento di codice genera una piccola finestra pop-up con un testo e due pulsanti. Viene applicata una semplice animazione — il frame scende dall'alto, acquisendo gradualmente le caratteristiche. Si chiude se premi il pulsante corrispondente o semplicemente cliccando sullo sfondo. In entrambi i casi, la finestra risale e si oscura, scomparendo completamente.

Diamo uno sguardo più da vicino a questo esempio.

Chiamare una finestra pop-up

L'esempio utilizza l'opzione più semplice — chiamare la finestra pop-up con un pulsante. Questo è utile se offri un modulo di registrazione al visitatore o l'aiuto per usare una funzione specifica. Il seguente frammento è responsabile del lancio del codice:

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

Avvia demo modal

</button>

Vuoi che la finestra si apra automaticamente? Allora dovrai approfondire lo studio di JavaScript. Ad esempio, puoi utilizzare il seguente script per avviare la funzione 2 secondi dopo il caricamento della pagina:

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

Un'altra opzione popolare è chiamare una finestra pop-up quando il cursore del mouse va oltre il frame principale del display. Realizzando che un utente sta per chiudere la scheda, mostragli la frase finale. Questo script è utilizzato a tal fine:

<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>

Il blocco "Modal"

Quindi, come rendere responsive una finestra modale in Bootstrap.

La finestra pop-up nel nostro esempio è composta da tre parti:

intestazione con il nome;

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

finestra principale con una descrizione testuale;

<div class="modal-body">

<h5 class="text-center mb-5">Inserisci il tuo testo qui</h5>

</div>

piè di pagina con pulsanti.

 <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
        <button type="button" class="btn btn-primary">Salva modifiche</button>
      </div>

Questa categorizzazione è standard per pop-up creati con Bootstrap. Tuttavia, puoi riempire ogni parte a tua discrezione, utilizzando numerosi elementi funzionali dalle librerie di plugin.

Modifiche alla finestra pop-up

Il codice descritto sopra sarà sufficiente per creare strumenti di marketing semplici. Ma puoi ottenere molto di più personalizzando i frame.

Ad esempio, il seguente frammento consente di impostare una certa dimensione di una finestra pop-up:

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

dove OO è la variabile che specifica il formato desiderato e può assumere i seguenti valori:

sm — corrisponde a una larghezza di 320 pixel;
lg — 800 pixel;
xl — 1140 pixel.

Se ometti la variabile di dimensione, apparirà sullo schermo una finestra pop-up di 500 pixel per impostazione predefinita. Per allungare il frame su tutto lo schermo, usa il seguente codice:

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

Se desideri cambiare l'animazione di una finestra pop-up, presta attenzione alla variabile modal-fade. Le librerie Bootstrap offrono una varietà di effetti. Ad esempio, se desideri che il frame venga ingrandito come uno zoom della fotocamera, inserisci il seguente frammento di codice:

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

Per far funzionare correttamente l'animazione, dovrai anche configurare gli stili CSS e creare lo script appropriato:

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

Un'altra caratteristica interessante disponibile in Bootstrap è il blocco di una finestra pop-up. Non permette di chiudere il frame cliccando sullo sfondo o premendo Esc. Per accedere al contenuto del sito, un utente deve eseguire un'azione mirata, come registrarsi dopo la scadenza del periodo di prova. In questo caso viene utilizzato il seguente codice:

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

Come creare un Pop-up con Claspo

Se hai bisogno di un elemento visivo più luminoso e accattivante, puoi usare una soluzione pronta per creare pop-up.

Una delle opzioni più convenienti è lo strumento Claspo.io. Ti consente di creare pop-up di qualsiasi livello di complessità senza alcuna conoscenza dei linguaggi di programmazione — vengono realizzati secondo il principio del "costruttore" trascinando vari elementi sullo schermo. Impariamo di più sulla creazione di un pop-up utilizzando Claspo.

Prova tutte le funzionalità avanzate con il piano gratuito a vita di Claspo

Inizia

Passo 1: Registrazione

Vai su Claspo e crea un account. Puoi anche accedere utilizzando i social network o il tuo account Google.

Scegli un piano tariffario adatto. Puoi familiarizzare con la funzionalità di Claspo gratuitamente — in questo caso sono disponibili tre widget su un sito con un numero totale di visualizzazioni fino a 30 mila al mese. Inoltre, una finestra pop-up fornirà un link allo strumento web.

I piani tariffari di Claspo sono convenienti e flessibili rispetto ad altri servizi. Scegli l'opzione migliore per il tuo business senza pagare in eccesso per funzionalità e visualizzazioni extra.

Passo 2: Crea una finestra pop-up

Claspo ti guida attraverso i seguenti passaggi:

definisci lo scopo — specifica quale funzione desideri implementare;

define-the-purpose

seleziona il formato — una finestra classica, un banner, un frame flottante, ecc.;

select-the-format

impostazione dello stile — scegli il design che corrisponde al design del tuo sito web;
scelta del modello — la finestra pop-up prende una forma completa;

choice-of-template

contenuto — trascina e rilascia elementi funzionali nel frame, inserisci testo, aggiungi immagini, ecc.

content

Il vantaggio dello strumento è che in pochi minuti puoi creare non solo una finestra di base con un pezzo di testo, ma un elemento visivo brillante che attira l'attenzione di un visitatore e fornisce alti tassi di conversione.

create-pop-up-window

Passo 3: Integrazione

integration

Quando crei un pop-up, ottieni uno script che si collega alle librerie proprie di Claspo. Puoi integrarlo tu stesso — lo strumento fornisce codice pronto e ti aiuta a trovare dove inserirlo. È disponibile anche l'integrazione con la maggior parte dei sistemi di gestione dei contenuti (CMS) più popolari, inclusi WordPress.

Passo 4: Lancio

Una volta integrato nel codice del tuo sito, il pop-up inizierà a funzionare immediatamente. Gestiscilo nell'interfaccia web di Claspo, modificando le impostazioni se necessario e ottenendo statistiche dettagliate. Lo strumento è anche compatibile con CRM e altri software aziendali. La sua integrazione profonda ti consente di creare offerte personalizzate per ogni visitatore del sito basate sulla cronologia delle attività o sulla segmentazione in base a varie caratteristiche.

Come generare rapidamente una finestra pop-up sul sito: conclusione

Utilizzando pop-up Bootstrap, puoi generare rapidamente finestre pop-up, gestendone in modo flessibile il contenuto, le dimensioni, le funzioni e persino le animazioni di visualizzazione. Competenze di programmazione di base saranno sufficienti per svolgere i compiti più semplici poiché la maggior parte del codice può essere preso da repository open-source come GitHub.

Ma se stai cercando uno strumento di conversione efficace per il tuo sito web, vale la pena utilizzare la soluzione chiavi in mano di Claspo. Puoi creare pop-up luminosi e funzionali in modo rapido e semplice senza alcuna conoscenza del codice! Sono assemblati secondo il principio del costruttore, scegliendo il design e il contenuto, e lo strumento li adatta a tutti i dispositivi, schermi e browser.

Puoi provare tutte le funzionalità di Claspo gratuitamente! Iscriviti ora per valutare il potenziale dello strumento e scegliere la migliore versione di smart pop-up per la tua attività!

Crea il tuo pop-up ad alta conversione con Claspo

Inizia