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 :)

Crash Bandicoot Zone ↗
Caos, libertà e risate: nel GDR ambientato nell’universo di Crash Bandicoot, ogni storia è possibile… e nulla è troppo folle!

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

War Thunder ↗
Aviazione, veicoli corazzati e flotte militari della seconda guerra mondiale. Parteciperai a tutte le principali battaglie!

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