Curiosità ? Pop-up

Curiosità ? Pop-up postato il 30/07/2011 12:15:06 nel forum programmazione, gdrcd, open source, hosting

Ciao a tutti , ho una curiosità :
ultimamente in moltissimi gdr si utilizza una soluzione alquanto accativante graficamente nonchè utile.

La funzione - credo sia in javascript - potete osservarla al seguente link
http://www.goldenagegdr.it/

cliccando su uno dei bottoni in basso :
come fanno a personalizzarlo a quel modo ?

quota

30/07/2011 12:50:31 e modificato da leoblacksoul il 30/07/2011 12:54:38

è una specie di finestra modale fatta con javascript oppure semplicemente un dialogo (dipende dal fatto che disabiliti o meno gli elementi sottostanti). A volte la si può trovare chiamata anche lightbox, anche se spesso viene affibbiato il nome lightbox solo nelle versioni che implementano gli slideshow.
Comunque la logica è sempre la stessa in entrambi i casi.

Funziona in modo molto semplice:
1_Nella pagina si inserisce un <div>, che con CSS e/o javascript viene reso invisibile e viene posizionato in modo assoluto sopra a tutto il contenuto della pagina
2_Ad alcuni elementi della pagina viene attaccato un evento onclick (di solito). Quando si clicca questo elemento viene eseguita una funzione javascript che in qualche modo decide cosa dovrà comparire all'interno del <div> che era nascosto (può essere qualsiasi cosa: HTML, immagini), ce lo mette dentro e poi rende il box visibile. Se ciò che viene caricato è HTML spesso lo si carica al momento con AJAX piuttosto che caricarlo al caricamento della pagina.
3_Nel <div> c'è un tasto X che inverte il comportamento del punto 2, cioè rende di nuovo invisibile il <div>

Poi il resto non è altro che un animazione, cosa complicata da implementare direttamente in javascript ma semplicissima se usi una libreria tipo jQuery.
Se vuoi usare Jquery non hai molto da scrivere dato che esiste già un implementazione di questo tra i plugin di jQueryUI. Ecco il link: http://jqueryui.com/demos/dialog/#animated

EDIT: in realtà non è neanche molto pesante. Può sembrare pesante se viene fatto il caricamento del contenuto con AJAX, ma è noto che se usi AJAX devi sempre attendere un po' per caricare gli elementi.

quota

30/07/2011 12:50:34

a meno che non mi sbagli di brutto - XD - più che javascript quello è Ajax :)

Pirates of the Caribbean ↗
Parti per un'avventura con Jack Sparrow, Will Turner, il Capitano Barbossa e altri spadaccini del franchise cinematografico Pirati dei Caraibi!

quota

30/07/2011 12:58:32

AJAX fa parte di Javascript irenes :P
AJAX è una serie di metodi e funzioni di javascript che permette di caricare elementi della pagina dopo che l'intera pagina è già stata caricata. Ma non fa nient'altro, è il resto delle funzioni di javascript che prende questi contenuti e li inserisce veramente nella pagina, con lo stile giusto, all'interno dell'elemento giusto, etc.

quota

30/07/2011 13:17:32

Hero Wars ↗
Costruisci la tua squadra di eroi leggendari e domina il campo di battaglia! Strategia, tattica e potenza si scontrano in questo RPG ricco di azione!

quota

31/07/2011 18:18:07

Non credo che abbia un nome.
Viene chiamata finestra modale quando ti IMPEDISCE di usare il contenuto sottostante, ma non ho mai sentito un nome per quelle che non lo fanno.
Non è un attributo che regola il loro comportamento, dato che non sono elementi HTML speciali ma solo solamente dei <div>. Semplicemente viene inserito un layer trasparente o opaco tra il dialogo e il resto della pagina rendendo di fatto inaccessibile quello che c'è sotto.

Comunque se usi il plugin che ho indicato devi solo inizializzarlo nel modo corretto e al resto penserà lui.

quota