Gestire e creare overlay popup dinamici con jQuery – TrgReveal Plugin

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!