TinyBox2: window modali standalone

TinyBox - windows modal

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:

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.

You might also like

LEAVE A REPLY