Gestire e creare overlay popup dinamici con jQuery – TrgReveal Plugin

Scritto Aggiornato il Di Riccardo Mel

Nella risorsa di oggi vediamo come gestire e creare facilmente overlay (popup) dinamici con jQuery e il plugin TrgReveal.

[lightgrey_box] ATTENZIONE: se lo desideri prova a leggere questi altri miei interessanti articoli riguardanti i popup/overlay: versione con trigger  | overlay al caricamento.[/lightgrey_box]

[button link=”http://www.targetweb.it/tutorial/2013/trg_reveal/index.html” color=”blue” target=”blank” size=”large”]Demo versione con trigger[/button]  [button link=”http://www.targetweb.it/tutorial/2013/trg_reveal_al_caricamento/index.html” color=”blue” target=”blank” size=”large”]Demo versione auto-load[/button]

Un overlay è di fatto un box che appare in seguito all’azione dell’utente, molto utile sopratutto per mettere il “focus” del visitatore su un particolare elemento come: testo, offerta, o elemento di design.  In questo articolo vi propongo una mia particolare versione e ri-visitazione studiata in modo da essere il più semplice e immediata possibile.

Panoramica e uso del plugin

Per poter usare il plugin trgReveal usate la seguente struttura:

Struttura HTML dei popup

 <div id="modal1" class="trg-overlay hide small">
    <div class="trg-modal-header">
    <h2>TrgReveal - small</h2>
    </div><!-- Modal header-->
    <p class="lead">Questo è un overlay</p>
    <p>Circumstances have taught me that a man's ethics are the only possessions he will take beyond the grave. i once heard a wise man say there are no perfect men. only perfect intentions. rehabilitated? </p>
    <a class="close-overlay">&#215;</a>
  </div>

Ovviamente nel caso usiate overlay multipli dovrete assegnare ad ogni overlay un ID univico differente. Agite sulla classe per assegnare la grandezza dell’overlay, potete scegliere fra: small – standard -big (vedi la demo). Grazie ad hide diciamo allo script di lasciare invisibile l’overlay al caricamento della pagina. trg-overlay è invece la classe per gestire lo stile finale del box popup. Una volta strutturato il popup nascosto con il nostro contenuto andiamo a preparare il trigger di apertura:

<a href="#" class="apri-trg-overlay" data="modal1">Apri Overlay1 - small</a>

Specificheremo nel campo “data”  l’ID univoco dell’overlay da far apparire al click.

NOTA: non cambiate il nome della classe al trigger di apertura per un corretto funzionamento.

Codice jQuery

Una volta strutturato l’html andiamo ad animare il tutto con jQuery collegando innanzitutto le librerie (jQuery e targetweb modal overlay). A questo punto aggiungiamo all’interno del DOM il richiamo al plugin…et voilà!.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="javascripts/targetweb-modal-overlay.js"></script>
<script>
$(document).ready(function() {

    TrgModalOverlay();

});
</script>

Da questo punto in poi ogni volta che cliccheremo sul trigger di apertura .apri-trg-overlay verrà aperto l’overlay specificato nel campo “data”. Non sono necessarie ulteriori configurazioni!

Codice stile Css

Per dare un pò di stile ricordatevi di collegare il file CSS –  targetweb-modal-overlay.css  – presente nel pacchetto download. Ovviamente potete cambiare l’aspetto dell’overlay e le dimensioni dei box a seconda delle vostre necessità.

.hide{ display: none;}
.close-overlay{ position: absolute; right: 1%; top: 1%; font-size: 30px; cursor: pointer;}
.trg-overlay{ background: #fff; position: absolute; z-index: 800; padding: 15px; overflow: hidden; }
.small{ width: 40%; }
.standard{ width: 60%; }
.big{ width: 70%; }
.overlay{
display: none;
background:#000;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:600;
cursor:pointer;
width: 100%; height: 100%;
}
.trg-modal-header{ border-bottom: 1px solid #d2d2d2; padding: 0px; margin: 15px 0px;}

Variante: overlay popup al caricamento della pagina

Ho pensato di introdurre una comoda variante che comprendesse anche l’eventualità di far apparire il popup al caricamento della pagina. In questo modo con un solo script potrete gestire due diverse (ma molto comuni) situazioni in modo molto immediato e veloce da impostare.

Per usare la variante di caricamento del popup al load della pagina vi basterà usare la seguente struttura:

Struttura HTML

<div id="modal1" class="trg-overlay hide small">
    <div class="trg-modal-header">
    <h2>TrgReveal - small</h2>
    </div><!-- Modal header-->
    <p class="lead">Questo è un overlay</p>
    <p>Circumstances have taught me that a man's ethics are the only possessions he will take beyond the grave. i once heard a wise man say there are no perfect men. only perfect intentions. rehabilitated? </p>
    <a class="close-overlay">&#215;</a>
</div>

La struttura HTML è rimasta invariata. Ovviamente in questo caso specifico potete tralasciare di inserire il trigger di apertura dell’overlay (in quanto viene caricato automaticamente).

Codice jQuery

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="javascripts/targetweb-modal-overlay.js"></script>
 <script>
 $(document).ready(function() {

    TrgModalOverlayLoader("modal1");

 });
 </script>

Come vedete non avendo più il trigger di apertura cambiamo la funzione di “richiamo” del plugin da TrgModalOverlay() in TrgModalOverlayLoader(“#ID-UNIVOCO-OVERLAY”); all’interno della funzione andiamo di fatto a passare al plugin l’id univoco dell’overlay da far apparire al caricamento.

Ovviamente nulla ci vieta di usare sia la versione con trigger sia quella con auto-load nello stesso progetto a seconda delle vostre necessità.

 Conclusioni e risorse

[button link=”http://www.targetweb.it/tutorial/2013/trg_reveal/index.html” color=”blue” target=”blank” size=”large”]Demo versione con trigger[/button]  [button link=”http://www.targetweb.it/tutorial/2013/trg_reveal_al_caricamento/index.html” color=”blue” target=”blank” size=”large”]Demo versione auto-load[/button] [button link=”http://www.targetweb.it/download/2013/targetweb_revealplugin_v1.0.zip” color=”blue” target=”blank” size=”large”]Download[/button]

Hai bisogno di ulteriori chiarimenti? Hai qualche suggerimento per migliorare il plugin? commenta questo articolo!

    1. Da IE8 in poi (il 7 o precedenti non sono più prese in esame neanche da Google e Youtube) il plugin funziona benissimo, testato pochi secondi fa…che problema hai nello specifico?

      Rispondi

  4. Salve, volevo usare questo script anche per le gallerie immagini (tipo lightbox) sono riuscito a fare tutto tranne chiudere il layer precedente quando ne apro uno nuovo.
    Mi potresti dire che funzione devo richiamare?

    Rispondi

  5. Ciao…!innanzitutto grazie per la spiegazione…potresti spiegarmi come fare per permettere più “popUp”, nel senso che ogni box abbia un testo differente da un altro?? grazie mille!

    Rispondi

  8. ciao, il div con classe .overlay non viene caricato, lasciando la pagina completamente visibile sotto senza effetto di oscuramento. Inoltre non trovo il link per il download dei file, ho dovuto estrarmi il codice js ispezionando il sorgente della pagina

    Rispondi

    1. scusa, sono riuscita a scaricare i file ed ho trovato cosa non andava. negli esempi che hai scritto nell’articolo non hai inserito il div con classe overlay, mentre nelal index dei file che permetti di scaricare c’è. grazie mille per questa risorsa davvero utile!

      Rispondi

    1. Una volta condiviso e aspettato il reload della pagina andando sotto l’ultimo capitolo “Conclusioni e download” noterai che è scomparso il box azzurro e al suo posto è apparso “Grazie per aver condiviso, clicca sul link qui sotto:
      Scarica lo script!”.

      Se hai ulteriori problemi sentiamoci in privato su questi canali @Facebook @GooglePlus @Twitter

      Ciao!

      Rispondi

      1. Buongiorno Riccardo,
        ho condivso per ben 2 volte, ho chiuso il browser, liberata la cache, ma non appare nè “grazie per aver condiviso” nè “scarica lo script”…
        Mi sai dire come mai?

        Rispondi

  10. Bellissima soluzione!
    Praticamente basta cambiare i modal1 in 2 3 4 5 etc. ed ottieni una marea di overlay.
    Grazie per averla condivisa.
    Ti chiedo: è possibile creare un overlay come iframe? Si potrebbe in questo modo processare più pagine restando sempre in quella iniziale.
    Grazie.

    Rispondi

  12. Ciao, come gestisci con blogger? Se volessi inserire una finestra modale in blogger a tutti gli utenti che arrivano per la prima volta sul mio sito web, presentandogli ad esempio l’iscrizione alla newsletter, come potrei fare?

    Rispondi

  13. Ciao, complimenti per l’ottimo lavoro.
    Vorrei “caricarlo” su un wordpress, è possibile? E se si, come?
    Grazie

    Rispondi

  14. Ciao a tutti, tutto funziona benissimo anche se non è ancora pubblicato sul sito.
    Una sola domanda: qualcuno ha un sistema semplice per dire di caricare l’overlay popUp solo all’accesso al sito e non al “ritorno” in home page da menu?
    Grazie

    Rispondi

  17. Grazie riccardo,
    per l’ottima sluzione che hai realizzato…
    Ho condiviso sulla mia pagina google+, ma purtroppo non riesco a scaricare lo script…

    Rispondi

  20. Quando si apre il popup cliccando al di fuori di questo si chiude,. E possibile bloccare la chiusura del popup? Grazie

    Rispondi

  23. Ciao Riccardo,
    come impostare il controllo con i cookie?
    Ho scaricato jequery.cookie.js ma non riesco ad inserire i comandi sull’html del codice della pagina.
    La finestra modale funziona mi mancano solo il controllo cookie
    grazie
    Ivan

    Rispondi

  24. Ciao,
    complimenti per l’articolo.
    Come posso effettuare il controllo con i cookies?

    Grazie della disponibilità
    Luca

    Rispondi

  25. ciao,io ho applicato il tuo plugin su un sito dove uso jquery 1.11.0 , sfruttando un template di bootstrap,ma il popup all’apertura della pagina non appare.Inoltre, se collego come da te indicato il js jquery 1.9.1.min.js ,oltre a non apparirmi il popup all’apertura della pagina,non mi funzionano neanche gli altri plugin javascript del sito( come lo scroll o il carousel) . Puoi indicarmi una soluzione? grazie!

    Rispondi

  26. Ciao ho provato questo overlay, ma.. non mi funziona una volta caricato su server, mentre in locale funziona ma il box che appare è ritagliato, come se fosse inscritto in un div della pagina sottostante.
    Ti posso segnalare la pagina in questione? grazie ciao

    Rispondi

      1. Sono riuscita a risolvere, in pratica ho dovuto togliere la class container. ora funziona.
        Grazie per l’utilissimo esempio 🙂

        Rispondi

  27. Ciao, posso utilizzare questo script anche per prestashop? Posso creare un popup per la newsletter con un’immagine di sfondo (banner)?
    grazie

    Rispondi

  28. Ciao, ho usato senza problemi questo utilissimo plug-in. Volevo porre una questione: io carico all’interno box una pagina utilizzando un iframe. Dentro questo iframe ho un modulo che inserisce dei dati. Come faccio, dopo aver effettuato il submit a chiudere automaticamente la pop-up e/o inserire un pulsante nel file html caricato nell’iframe che chiude la pop-up?
    Grazie anticipatamente

    Rispondi

  30. Ciao, scusa ma non riesco a scaricare i file…. ho condiviso più e più volte ma al redirect della pagina non mi esce dove scaricare… Mi puoi aiutare? Grazie!!

    Rispondi

  31. Ciao, ho notato che il popup non è perfettamente centrato (me ne sono accorto implementandolo per un sito responsive). Come vengono calcolati i margini left e top?

    Rispondi

  32. Ciao Riccardo complimenti per il tuo sito web. Visto che sono un web designer che voglio riprendermi in mano la mia professione per vivere, mi piace saper se hai disponibilità a suggerire link per approfondire jquery. Non l’ho mai usato ma voglio imparare a crearmi plugin per me e wordpress non usando cose di terze parti riguardo a grafica ed effetti. Ti chiedo se conosci anche come fare animazioni 3D usando formule matematiche trigonometriche come si usava in flash. Buonaserata Andrea

    Rispondi

  33. finalmente sono riuscito ad integrare il mio popup, grazie, se posso chiederti, mi servirebbe una funzione da aggiungere allo script che permetta obbligatoriamente a tutti di chiudere il popup dal pulsante.

    Rispondi

  34. Ciao, ottimo plugin. Complimenti e grazie per il contributo offerto. Lo sto usando molto in diverse situazioni, ma ne ho una dove non riesco a passare nell’overlay un dato dinamico. In poche parole devo caricare dentro all’overlay una serie di dati recuperati da DB (lavoro in asp), ma no riesco a leggere la chiave per il recordset. Se lancio un submit da dentro l’overlay riesco senza problemi a recuperare la chiave, ma tramite il link diretto href=”#” non riesco. Ho provato a fargli leggere il PATH_INFO, per ricavare la mia chiave, o con javascript recuperando un valore da un campo, ecc,ecc, ma niente. Ci può essere qualche altra possibilità?
    Grazie

    Rispondi

  36. ciao riccardo grazie del codice, un informazione vorrei che ci fosse l’autoload solo in lacuni casi di collegamento come potrei fare?
    Es:devo cliccare su un collegamento a una pagina e deve essere aperto un determinato pop up , ome potrei fare?

    Rispondi

  37. Script comodissimo semplice ed affidabile, complimenti!
    Ho un problema però, desidererei fare in modo che con la versione auto-load, la chiusura della finestra poup avvenisse solamente cliccando sulla crocetta e non sulla parte in trasparenza.
    E’ fattibile? se si come?
    Grazie.
    Piero

    Rispondi

  38. ciao, è possibile costruire un overlay contenente un testo con delle domande con opzioni di risposte multiple a cui l’utente che lo visualizza può rispondere cliccando su una delle risposte possibili e che invii le risposte ottenute ad esempio a un database? Grazie mille.

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

come-personalizzare-la-scrollbar-del-proprio-sito-con-jquery
Up Next:

Come personalizzare la scrollbar del proprio sito con jQuery

Come personalizzare la scrollbar del proprio sito con jQuery
twitch