GreyBox è una libreria Javascript che permette di generare on-the-fly finestre modali. Non si tratta di una popup window (che si apre in una nuova finestra del browser), ma di una finestra che si sovrappone a quella già attualmente aperta, portandosi quindi in primo piano.

In internet vi sono diverse lib che fanno la stessa cosa ma perchè scegliere proprio questa ?? La risposta è riassunta nel motto che la sponsorizza: A pop-up window that doesn’t suck. La lib, in soli 22 kb, mette a disposizione un completo un sistema di creazione di finestre molto personalizzabile, lasciando al programmattore spazio alle sue esigenze. Vediamo ora come si utilizzano le api standard e su quali parametri possiamo agire.

Una volta scaricata la lib, è necessario includere al’l interno dell’ header della pagina le seguenti righe di codice js, che permettono di specificare il percorso assoluto della direcotry contenente i sorgenti di Greybox:

<script type="text/javascript">
    var GB_ROOT_DIR = "http://mydomain.com/greybox/";
</script>

A questo punto, possiamo includere i sorgenti della libreria:

<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

AJS.js si occupa della gestione degli effetti grafici della finestra (per esempio la dissolvenza quando si chiude la finestra), AJS_fx e gb_scripts.js sono il core vero della librearia, mentre in gb_style.css è definito lo stile della finestra modale.

Per aprire un link in una finestra modale al centro dello schermo si usa:

<a href="URL" title="CAPTION" rel="gb_page_center[WIDTH, HEIGHT]">HTML</a>

CAPTION  è il titolo che  mostrerà la finestra,  mentre WIDTH e HEIGHT definiscono rispettivamente larghezza e altezza.

Il sito propone una serie di interesanti esempi base, mentre a questo indirizzo sono proposti i casi di uso più comune.

In questo tutorial, viene mostrato come definire una finestra personalizzata, a partire dalla definizione di una finestra GB_show, mostrando quali parametri è possibile modificare, danado quindi spunto all’ implementazione di nuove funzionalità.

Per qualsiasi informazione, FAQ o segnalazione di bug, richiesta di aiuto è presente anche un ottimo gruppo di discussione, che è un filo diretto con i creatori della libreria e la community.