TinyBox2: window modali standalone

TinyBox2 è il successore di TinyBox, una libreria JavaScript standalone, autonoma senza l’utilizzo di ulteriori framework come jQuery, per la realizzazione di finestre modali.

Dal peso leggero (5 KB), supporta immagini, iframe, HTML e richieste AJAX native. Le finestre modali realizzabili sono molto personalizzabili nelle animazioni, livello di opacità, auto-hide, posizione personalizzate e molto altro. Come già ci hanno insegnato altri tipo di plugin con la stessa funzionalità, è possibile chiudere le finestre cliccando sul pulsante di chiusura, cliccando ovunque al di fuori dell’area della finestra o tramite il tasto ESC della tastiera.

Inoltre possiamo implementare funzioni di callback per gli eventi di apertura o chiusura, e le finestre possono essere impostate con dimensioni fisse in larghezza e lunghezza o automatiche in base al loro contenuto.

E’ semplice utilizzare TinyBox2, ecco una semplice chiamata di una pagina HTML in una finestra modale:

TINY.box.show ({url: 'page-example.html' , larghezza: 300, altezza: 150});

Le opzioni disponibili sono:

• html: contenuto HTML [false]
• iframe: URL for embedded iframe [false]
• url: path per chiamata AJAX [false]
• post: variabile post, usata in congiunzione con url [false]
• image: path immagine [false]
• width: larghezza finestra [false]
• height: altezza finestra [false]
• animate: attiva/disattiva animazione [true]
• close: visualizza bottone chiudi [true]
• openjs: generica funzione eseguita su evento apertura [null]
• closejs: generica funzione eseguita su evento chiusura [null]
• autohide: numero di secondi di attesa per l’auto-chiusura della finestra[false]
• fixed: imposta posizione della finestra fixed/static (css) [true]
• opacity: imposta opacità della finestra da 0-100 [70]
• top: per la posizione assoluta della finestra, pixels di distanza dal’alto [null]
• left : per la posizione assoluta della finestra, pixels di distanza da sinistra [null]

Questo script è testato in IE7+, Firefox, Chrome, Opera e Safari ed è disponibile gratuitamente sul sito dell’autore con per ulteriori informazioni e demo.