In questo articolo scopriremo come creare un effetto di finestra animata in overlay grazie alle potenti librerie jQuery.
Per chi non lo sapesse per overlay si intende l’apertura di una finestra in popUp restando però nella stessa pagina di navigazione e rendendo lo sfondo “oscurato” per centrare l’attenzione sulla finestra e sul suo contenuto. Un po come avviene, ormai spesso, per le immagini.
[lightgrey_box] ATTENZIONE: Questa versione è obsoleta, ti consigliamo di leggere anche questo articolo: TrgReveal plugin [/lightgrey_box]
Perchè fare uso dell’overlay? la risposta e’ semplice: ormai moltissimi siti ne fanno uso perche’ rendono la navigazione piu’ fluida e scorrevole, riducono i caricamenti e permettono al visitatore di avere tutte le informazioni che servono senza “gironzolare” troppo nel sito spostandosi di pagina in pagina (e magari stancandosi).
DEMO | DOWNLOAD
La teoria
Il funzionamento si basa sull’utilizzo del comando .click di jQuery che ci permette di eseguire una funzione al click del mouse. Una volta premuto sul “trigger” ovvero sul paragrafo o testo desiderato, la funzione richiama il div overlay e il box, facendoli apparire con effetto FADE. Per chiudere l’overlay sara’ sufficente creare un ulteriore trigger ( che per comodita’ chiameremo “chiudi”) che ci permettera’ di chiudere sia l’overlay che il box appena apparso.
Come misura precauzionale si può facilmente ideare una “chiusura alternativa” di sicurezza, che avviene quando l’utente (magari svogliato) clicca sulla parte scura dell’overlay.
CODICE HTML
<div class="overlay" id="overlay" style="display:none;"></div>
Questa stringa di codice imposta il div dell’overlay. Si fornisce lo stile display: none per rendere “invisibile” il div al visitatore fino a quando non clicca sul trigger di apertura.
Subito sotto creiamo anche il div relativo al box che conterra’ il testo ( o immagini) del nostro popUp:
<div id="box">
<h1 class="titolo_box">Questo e' un overlay</h1>
<p class="testo-box">Testo dell'overlay qui</p>
<p class="testo-box">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<hr />
<p class="chiudi">X</p>
</div> <!--fine box-->
Come vedete per creare il trigger di chiusura e’ sempre buona norma impostare una CLASSE, che sarà facilmente richiamabile con jQuery.
Il trigger di apertura invece, posizionabile a vostro piacere nel documento, assume questo aspetto:
<p class="apri"> >> APRI L'OVERLAY</p>
Come vedete e’ ESSENZIALE impostare una classe ai vari trigger per renderli univoci e richiamabili nei nostri script.
Stile CSS
Ecco il codice per i trigger, box e overlay:
.apri{ font-size:18px; font-family:Verdana, Geneva, sans-serif; float:right; margin-right:50px;}
.chiudi{ font-size:18px; color:#000; font-weight:bold; position:absolute; right:2%; top:0%; cursor:pointer;}
.overlay{
background:#000;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursor:pointer;
/*Trasperenza cross browser*/
opacity: .7; filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
#box{ width:600px; height:400px; background-color:#FFF; display:none; z-index:+300; position:absolute; left:30%; top:20%; -moz-border-radius: 15px; -webkit-border-radius: 15px;
border-radius: 15px;}
Come vedete non vi e’ nulla di troppo complicato solo alcune precisazioni:
– l’overlay ha impostato una trasparenza (se non vi piace potete levarla) cross-browser compatibile anche con IE7.
– Il box ha i bordi arrotondati con i CSS(3), se non vi piace potete levarlo. Essenziale anche qui, il comando display:none per rendere invisibile il popUp fino a che l’utente non lo apre.
– i trigger hanno lo stile cursor che permette di impostare che tipo di icona deve apparire al passaggio del mouse sull’elemento.
– Animiamo il tutto con jQuery
Ecco il codice completo per effettuare l’animazione. Vedi la sezione “teoria” per delucidazioni sul codice:
$(".apri").click(
function(){
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});
$(".chiudi").click(
function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});
//chiusura emergenza
$("#overlay").click(
function(){
$(this).fadeOut('fast');
$('#box').hide();
});
}); //fine dom
NOTA: Occhio alle librerie! ricordati di includere le librerie jQuery all’inizio del documento dentro il tag <head> !
Far apparire l’overlay al caricamento del documento
Per far apparire l’overlay al caricamento del documento non dobbiamo far altro che modificare una riga del codice JS:
Cambiate da:
$(".apri").click(
function(){
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});
In:
$(document).ready(function() {
//[...]
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
//[...]
In questo modo subito dopo che il documento sarà pronto, faremo apparire l’overlay dinamico. In parola povere viene bypassato il trigger “apri”, ovviamente dopo il codice di cui sopra continuate a scrivere il codice per poter chiudere l’overlay appena apparso 😉
– Lentezza con IE8
E’ risaputo ormai che ie8 ha un motore javascript troppo obsoleto e pertanto le animazioni jQuery risultano più “scattose”. Per ovviare a tal problema e’ possibile decidere cosa eseguire se il browser riconosce IE8 (o precedenti).
Ecco il codice:
if ( $.browser.msie && $.browser.version < 9 ) {
//script da eseguire CON IE
$(".apri").click(
function(){
$("#overlay").show();
$("#box").show();
} else {
//script da eseguire senza IE
//script normale
In questo modo se viene rilevata una versione di IE inferiore alla 9 il box e l’overlay appariranno senza animazioni, rendendo il tutto fluido. Per tutti gli altri browser invece l’animazione restera’ uguale a prima.
NB: E’ possibile attribuire anche un immagine (al posto della X) al trigger di chiusura, in modo estremamente facile grazie al tag <img> html.
Enjoy! scrivete nei commenti se vi e’ stato utile!
Ciao,
grazie mille per il tutorial!
ti volevo avvisare che su explorer 7 e successivi il layer nero non è trasparente, ma nero pieno.
Come si può sistemare la cosa?
Bel tutorial. Bravo.
Essendo alle prime armi… potresti dirmi come inserire una immagine al posto della X di chiusura ?
E se nel popup volessi inserire un’immagina oltre a del testo, sarebbe possibile ?
Grazie
Certo puoi inserire un’immagine all’interno del Popup semplicemente inserendo il tag .. stessa cosa vale per la X di chiusura, anzichè il tag P crei un DIV con un tag IMG e lo posizioni dove vuoi tramite i css…
sì prutroppo si perchè ie7 e 6 non supporta la trasparenza purtroppo non si può fare molto…
In alternativa potresti creare un file png con trasparenza e richiamarlo via css al posto di
opacity: .7; filter: alpha(opacity=70);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
ma onestamente non mi preoccuperei di ie7 ( e precendenti) anzi fossi in te userei lo script anti-ie7/6 che trovi anche qui sul mio sito =)
eheheh… lasciamo stare il discorso explorer. Penso che se si contassero i giorni di lavoro passati per colmare le lacune di explorer, dovrebbero darci un vitalizio!
Però ho visto che adesso hanno aggiunto un bottoncino vicino a “refresh” che dice visualizza correttamente! ahahahah… fai te…
Tornando alla png con trasparenza… la metto come background al posto di opacity…? ma le png con ex 6 non danno problemi?
si infatti mettendo l’immagine png nera con opacità risolvi solo su IE7.
Per ie6 puoi provare tool per gestire i png quale css pie (trovi un articolo anche qua sul sito) oppure altri tool per gestire i png ( non sempre funzionano bene, css pie di solito va è il migliore).
E’ normale che il risultato non sarà mai come con gli altri browser
mi sono documentato.
Il filtro di trasparenza non funziona su IE se non specifichi width o height.
Questo css funziona:
.overlay{
background:#000;
z-index:100;
cursor:pointer;
height : 100px;
width : 100px;
opacity : 0.7;
filter:alpha(opacity=70);
}
IE è sempre di più il nemico del mondo!
Ciao ciao
IO ODIO IE!!!
uff a me resta sempre nero l’overlay… ma non capisco perchè… nel sito ho altre opacità e funzionano… questa no…….
idee del perchè???
grande guida cmq!!!
Roby
hai già provato a usare un png invece che l’opacità? purtroppo ie gestisce male la cosa..
sì con un png trasparente funziona….. ma trovo assurdo che con alcune cose dello stesso progetto vada e con altre no…. bah.. misteri…
grazie comunque!!!
ciao ciao
nessun mistero purtroppo, solo quello schifo di ie! XD
grazie lorenzo non la sapevo questa =) si impara sempre!
è possibile utilizzare questo script gestendo l’evento onload per fare in modo che sull’onload della pagina si apra il popup overlayer
e invece sul close del popup fare in modo che venga ridirezionato ad un altra pagina?
Bellissimo articolo complimenti!
Volevo sapere però come si può fare a farlo apparire automaticamente e farlo scomparire dopo un tot di secondi. Grazie
per farlo apparire automaticamente basta che apri il dominio con document ready e non imposti il click function.
Per farlo sparire dopo un tot di secondi usa il comando delay() trovi una guida esaustiva sul comando nella sezione jquery del sito.
@FM: si certo puoi usare onload ma te lo sconsiglio, per farlo apparire quando apri la pagina metti il codice relativo all’apparizione senza il click function subito dopo l’apertura del DOM in questo modo apparirà subito e non perderai in prestazioni.
per il redirect puoi usare una funzione del vecchio javascript che reindirizza a una determinata pagina al click anche se ora mi sfugge prova su Google di sicuro la trovi =)
scusate se vi rispondo ora ma ero in vacanza XD se avete bisogno fatemi sapere =9
Vorrei anche io farlo apparire all’apertura di una pagina automaticamente, ma non ho capito come, potresti spiegarmi dettagliatamente come fare? Grazie in anticipo!
Ho aggiunto un paragrafo all’articolo, buona lettura!
Ciao! 🙂
Comeplimenti per la guida! Finalmente ci ho capito qualcosa! 😉
Volevo sapere, per avere più link divesi in overlay sulla pagina, come devo modificare il codice?
molto banalmente crei dei trigger differenti per ogni cosa che vuoi visualizzare: es. trigger1 —> apri overlay1 | trigger2—> apri overlay2 etc =)
puoi farmi un esempio terra terra di almeno due trigger e successiva azione dell’apertura di due testi in overlay sulla stessa pagina?
Ciao Riccardo,
non mi è chiaro come modificare i trigger per avere più link cliccabili e relativi box sulla stessa pagina. Dici di modificare i trigger, ma qali? quelli di apertura? e lo script come lo modifico?
Ciao Luca, ti consiglio di usare l’evoluzione di questo plugin..lo trovi qui: http://www.targetweb.it/gestire-e-creare-overlay-popup-dinamici-con-jquery-trgreveal-plugin/
Buona continuazione!
Grazie mille!!! Risolto! Ottimo!
Ah, ok! Credevo ci fosse un modo per fagli cambiare il numero del trigger in modo semi dimanico.
Ho un altro quesito. Sai perché inserita la pagina in un include che contiene altre animazioni in jquery, su Chrome e IE funziona l’overlay e su Firefox no?
Dipende tanto dalle altre animazioni, poichè tutti gli script jquery usano la variabile $ alcune volte vanno in conflitto anche se la cosa è strana (dato che non va solo su firefox). Ti consiglio di analizzare il DOM con un tool (tipo firebug) e vedere se non c’è qualche casino.
Puoi controllare anche eliminando qualche script e vedendo quale è quello incriminato su firefox.
Per rendere dinamico l’overlay nella tua demo devi aggiunger alla classe box queste proprietà :
.box {
top: 88.9px;
left: 314px;
position: fixed;
}
Ciao!!e bellissima giuda! 😉
Ciao!
Ottima guida, però avrei un problema:
avrei bisogno di collegare questo “evento”, ovvero l’apertura del box, a più di un link sulla mia pagina.
Mi spiego: ho una barra, che è comune a più pagina, ma ad ogni pagina deve aprire un diverso box, per diverse funzionalità. Nello specifico: ho la barra per “Aggiungere una news”, che compare in prima pagina, e sulla quale l’evento di cui si parla avviene;
Nel momento in cui cambio pagina, clicco sulla barra, dove però stavolta c’è scritto, per esempio, “Aggiungi uno studente”, ma non fa nulla.
Aggiungo che nel sito che sto costruendo, ho una prima pagina “index”. Le successive pagine, una volta cliccato sul menu, vengono caricate con .load all’interno di un container presente nella pagina “index”.
Con load devi re-inserire gli script all’interno dalla pagina che richiami con .load altrimenti non vengono interpretati. Per quanto riguarda i diversi trigger di apertura o crei un id diverso per ciascuno e “componi” il tuo script, oppure usi cicli if/for anche se se sei alle prime armi potrebbe risultare complesso. 😉
Salve Riccardo sono sempre ultimo perdona la domanda innanzitutto complimenti per la guida, io ho questo problema, in locale è tutto ok o quasi tutto riferendomi alla cacca ie . ho caricato il tutto sul mio hosting e indovina un pò su IE o explorer o merdaccia 8 non si vede nulla solo chiudi…
sai percaso aiutarmi?
Ciao Marco la cosa strana è che in locale va e in remoto no… sicuro non ci sia una variabile diversa in remoto?
Se hai problemi entra nella pagina di facebook così mi puoi postare il code incriminato e ti posso aiutare meglio 😉
Salve Riccardo questo tuo spazio comincio ad apprezzarlo moltissimo anche per la velocità di risposta;)
guarda non sò cosa dirti ora funzia… naturalmente con i limiti di IE, e di certo non sarò io a trovare delle scorciatoie.
Così i nostri amici del web, capiranno la differenza di browser .
Saluti Grandeeeee….
Bene Marco 😉 continua a seguirmi 😉
Ciao!
Ottima, anzi straordinaria guida!!!
Volevo chiederti come posso fare a richiamare una pagina html esterna!!!
io clicco sul bottone e si apre una pagina html con testo e foto con effetto overlay
grazie e complimento
Roberto
Ciao Roberto! puoi usare questo metodo e integrarci il metodo .load per caricare all’interno del div overlay la pagina esterna:
http://www.targetweb.it/jquery-load-caricare-elementi-e-fare-piu-azioni-sulla-stessa-pagina/
Fammi sapere se hai bisogno di altre delucidazioni ;=)
…sinceramente non ho ben capito cosa ho fatto ma FUNZIONA!!!!
grazie mille!!!!
posso chiede un’altra cosa credo semplice…
come funziona i’ effetto hover al passaggio del mouse
in pratica vorrei fare l’effetto che hai sull’immagine grande all’inizio di ogni pagina: QUANDO IL MOUSE VA SOPRA DIVENTA OPACA LENTAMENTE
grazie ancora
Roberto
Così a “freddo” puoi usare o questo:
http://www.targetweb.it/gestione-opacita-con-jquery-per-thumb-e-gallerie/
Oppure i css3:
.thumb{-moz-border-radius: 3px 3px 3px 3px;
background-color: #F9F9F9;
border-color: #EEEEEE #DDDDDD #DDDDDD #EEEEEE;
border-style: solid;
border-width: 1px;
padding: 5px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
margin:10px 5px 5px 10px;
}
.thumb:hover{ opacity:0.6;}
in thumb:hover imposti l’opacità finale da raggiungere, mentre modifica i secondi di sopra per effuttuare l’animazione più velocemente/lentamente a seconda della tue esigenze.
Ciauz!
E possibile aprire il pop up all’apertura della pagina?
http://www.targetweb.it/overlay-jquery-al-caricamento-della-pagina/
Ciao!
Ciao Riccardo,
complimenti per la ottima guida. Ho inserito il tuo codice nel mio sito e funziona correttamente. Solo una “chicca”:
“è possibile far si che il box si possa spostare nello schermo ? ”
cioè all’avvio del box questo si presenta nel centro della pagina, ma poi a piacimento mi piacerebbe se si potesse spostare in altre posizioni della pagina.
Ti ringrazio
Saluti
Francesco
integra il div principale usando questo:
http://jqueryui.com/demos/draggable/
Ciao,
davvero un’ottima guida!!
Vorrei porti un quesito:
ho incorporato all’interno della mia pagina php una SELECT da un db mySQL.
Questa SELECT poduce i risultati ponendoli in una tabella html.
Il testo di un capo è troppo lungo da poterlo visionare all’interno della stessa , e poichè i risultati possono essere numerosi, potrebbe essere anti-estetico visualizzare il testo completo n volte per quanti sono i records prodotti.
vorrei sapere se fosse possibile visualizzare solo due campi del record (es. DATA e TITOLO) e cliccando su un trigger impostato su un campo visualizzato, si possa visualizzare in overlay il restante capo (TESTO).
Spero di essere stato chiaro nella spiegazione del problema.
Grazie in anticipo
Si allora estrarre solo alcuni campi ovviamente è possibile, puoi abbinare la classe trigger a un determinato elemento recuperato in modo dinamico.
Il problema è che non sai estrarre solo determinati campi dal loop?
Bravissimo Riccardo, grazie per i tutorial. Domanda! Nel box ho inserito un video .mov. Funziona, ma non voglio vedere la banda di scorrimento del video, c’è modo di escluderla? E non sono riuscita a cambiare la funzione in modo tale che l’overlay si autochiuda quando è finito il video…
Consigli?…
GRAZIE
Prima di tutto complimenti per il grande lavoro di divulgazione che risulta anche molto comprensivo e funzionale e non è da tutti. E aggiungo che credo di aver capito jQuery grazie a te Riccardo. Mi chiedevo se la finestra dell’overaly (o meglio la zona destinata al testo) può contenere un form da compilare.
Grazie! P.
Ciao Paolo certamente all’interno del div contenitore basta mettere il classico form di contatto o di ricerca. Se stai cercando un form per i contatti dai un’occhiata qui:
http://www.targetweb.it/form-contatti-php-con-antispam/
Bene! Sono belli i form sul nero e centrati e credo più facili da compilare.. Sono riuscito a installare tutto, ma stranamente la finestra dell’overlay non risulta centrata nello schermo ma si sposta in basso a dx e una parte rimane nascosta sotto il footer.. forse dipende dai livelli css?
Ho risolto intervenendo sul css con questa modifica:
Da:
.overlay {
position:absolute;
A:
.overlay {
position:fixed;
Strano però. Non capisco perché ho dovuto fare questa modifica quando la tua pagina funziona benissimo senza cambiare nulla.. Cmq grazie di tutto, ho creato il mio primo overlay!
Ottimo 😉
Complimenti, bellissimo articolo!
Volevo chedere se era possibile fare in modo che l’overlay si apre all’apertura della pagina ma solo la prima volta, in modo che se cambio pagina e poi torno sulla prima non si riapra ancora.
Grazie.
Devi lavorare sui cookie 😉
Scusa la mia ignoranza, ma la mia conoscenza si limita ad una base di html e basta! cosa intendi per lavorare sui cookie???
Grazie per avermi risposto.
Ciao, io volevo semplicemente che cliccando su un semplice “apri” si aprisse una finestra in pop-up con una frase.
Es. Per avere ulteriori informazioni clicca qui.
La persona clicca su “clicca qui” e gli appaiono le ulteriori informazioni, senza bisogno che queste siano su una pagina web.
Mi è sembrato che quello che descrivevi qui fosse più o meno questa cosa, anche se molto più complicata.
Ho provato a fare copia incolla dei tuoi codici ma non mi funzionano, su due siti diversi. Sicuramente colpa mia…non ci capisco molto.
Riesci ad aiutarmi o indicarmi forse un metodo diverso da quello di questa pagina e che magari è più adatto?
In caso grazie mille!
Ciao Martina, visto che sei una mia lettrice (spero affezionata) se hai Skype aggiungimi (riccardo.mel90) che ti do supporto gratuito 😉
ciao. complimenti per la guida. Ascolta, io vorrei fare questo: una volta aperta la finestra overlay, vorrei che ci sia una fotogallery, quindi non una sola immagine, come nel tuo esempio, ma una serie di foto, che possono partire in autoplay o essere comandate con un click, o entrambe le opzioni. Di conseguenza, avrei bisogno anche di una freccia che vada verso sinistra e di una che vada verso destra, per far intuire all’utente il modo con cui poter interagire e comandare così la slide fotografica.
spero d’essermi spiegato.
grazie, corrado
Ciao Corrado se non hai voglia di crearti il tutto personalizzato prova a ricorrere a http://fancybox.net/ 😉
scusa riccardo. Ma nel sito che mi hai suggerito, come faccio a scaricarmi i files sorgenti? cioè, io ho nozioni html, ma non riesco a capire quali sono i sorgenti da prendere per ogni singola animazione…
Credi sia molto difficile per te spiegarmi come implementare il codice che hai pubblicato tu per allargare la overlay da te creata ad un funzionamento in slide fotografica?
help me… 🙂
dunque riccardo? riesci per caso ad aiutarmi implementando il tuo codice senza far ricorso a situazioni diverse come quella da te precedentemente suggeritami?
grazie mille
Dunque Corrado, l’uso è abbastanza semplice ed è spiegato sul sito del plugin. esula abbastanza dall’articolo in questione date le tue richieste.
Vai su http://fancyapps.com/fancybox/ scarica il plugin, guarda come usarlo aiutandoti con il sito e visionando il codice contenuto nel pacchetto zip.
Se proprio non ci riesci se vuoi posso configurartelo sul tuo sito ma ovviamente non gratis e in altra sede. Saluti! =).
Mi chiedevo se fosse possibile inserire l’overlay su una pagina di WP.
Tutto andrebbe liscio tranne per la mancanza del file html non previsto su WP dove inserire il codice html, css, ecc.
Forse ho risolto con un plugin (Ez Overlay). Installato, e con le solite modiche sembra che funzioni tutto.
Ciao Riccardo ho integrato la tua guida in una pagina php e funziona benissimo, vorrei solo fare una cosa, siccome la pagina in questione potrebbe essere lunga vorrei che il box venisse visualizzato al centro dello schermo e indipendentemente dalla lunghezza della pagina. come posso fare????
Usa position:fixed anzichè position:absolute, in questo modo anche durante lo scorrimento della pagina il tuo overlay rimane al centro
Ciao a tutti,
per quanto riguarda l’opacità dell’overlay su explorer, sarà poco ortodosso, ma io ho risolto aggiungendo un banalissimo !important alla proprietà ms-filter della classe overlay. 🙂
ottimo Luca, grazie di aver condiviso la tua esperienza! =)
“Ciao Riccardo ho integrato la tua guida in una pagina php e funziona benissimo, vorrei solo fare una cosa, siccome la pagina in questione potrebbe essere lunga vorrei che il box venisse visualizzato al centro dello schermo e indipendentemente dalla lunghezza della pagina. come posso fare????”
Ciao Riccardo anche a me interesserebbe avere una risposta a questa domanda.
Ti ringrazio.
Ciao Marianna ci sono due strade: ho trasformi il css della guida in modo che si adatti, oppure usi jquery usando le proprietà .height() (ovviamente come attributo di heght devi usare document e non window).
Prova a vedere qua:
http://www.targetweb.it/creare-una-lightbox-personalizzata-con-jquery/
e vedi se riesci a mettere insieme il tutto 😉
Ciao Riccardo ti faccio i miei complimenti per questo tutorial.
Volevo chiederti, se possibile, un aiuto: non riesco a fare aprire finestre con contenuti diversi (immagini) su una stessa pagina.
In pratica ho delle immagini nella pagina e vorrei che cliccando su di esse si aprisse la stessa immagine più grande.
Sono riuscita a farlo con un’immagine senza problemi, ma non riesco ad andare avanti, facendolo anche per le altre.
Hai spiegato a qualcuno qualcosa riguardo i trigger ma non sono molto esperta e non ho capito. Potresti farmi un esempio?
Grazie mille.
Ciao Dani per fare questo tipo di iterazioni ti consiglio una lightbox, ecco alcuni esempi:
La mia:http://www.targetweb.it/creare-una-lightbox-personalizzata-con-jquery/
La più famosa:http://fancyapps.com/fancybox/
Fammi sapere se è quello che cerchi 😉
Ciao Riccardo,
è esattamente quello che cercavo! Ho provato la tua e funziona perfettamente, davvero bella!
Però avrei ancora una domanda: la mia pagina è lunga e quindi ha una barra di scorrimento verticale. Quando vado ad aprire la lightbox la barra sparisce e si vede un piccolo spostamento della pagina a destra. Quando chiudo il box tutto torna normale, e la pagina si sposta a sinistra.
Ho provaro con ie, firefox e chrome e succede a tutti.
E’ davvero un dettaglio ma se si riuscisse a sistemare sarebbe davvero perfetto!
Magari lavorando sul posizionamento del box?
Grazie davvero
ciao dani si l’ho notato anche io in effetti ora nella demo, ora come ora non ho tempo tecnico per fixare, in alternativa ti consiglio fancybox che è davvero molto scalabile e “rodato”. Piu’ che altro puoi studiarti il mio articolo per imparare alcune importanti nozioni di jquery che ti serviranno anche in futuro (dopotutto il blog serve sopratutto a questo ;)) e per sapere “come è fatta una lightbox”. Appena mi libero con impegni di lavoro fixo il bug 😉
Grazie Riccardo, ho provato fancybox e non c’è questo bug, anche se ormai mi ero affezionata alla tua lightbox!
Quando riesci a sistemare il bug, fammi sapere, ok?
Ora che ho scoperto il tuo blog, non mi lascio scappare l’occasione di imparare qualcosa di più su Jquery.
Grazie ancora,
Dani
Ciao, ti volevo chiedere ma come devo fare ad implementarlo nel mio sito in tutte le pagine? non sono molto esperto mi portresti illuminare? 🙂 🙂
Per implementarlo in tutte le pagine ripeti lo script. Se usi php crea una funzione e richiamala nelle pagine in cui vuoi usare lo script.
Ciao, come faccio ad inserire un immagine di sfondo all’ interno dell’ overlay? e dove regolo le dimensioni dei caratteri?
le dimensioni dei caratteri e lo sfondo sono da impostare via CSS come sei abituato.
Ciao, qual’è la parte di codice che ne fa riferimento? nel file è presente un css però nel’ html è presente la sessa parte di codice per lo style, qualè fa vero riferimento?
Ciao,
come faccio a inserire più pop up in una stessa pagina html?
Grazie per il tutorial.
Ciao, è possibile passare una variabile javascript al overlay?
Nel senso di far caricare l’overlay con ajax?
Cavoli che guida O.O davvero complimenti! Secondo me questo è un’ottima base per incominciare con il jQuery.. Davvero molto molto chiaro. Grazie! ^^
Ciao ottima guida, davvero complimenti…
Comunque ho inserito un video ma quando chiudo la finestra essa continua a riprodurre e quindi si sente la musica… come evitare questo problema??? grazie
Ciao Felice, il video è preso da youtube? quando chiudi l’overlay in pratica non si stoppa?
Ciao Riccardo grazie per avermi risposto, praticamente il problema è proprio come lo descrivi te!!! ….
Usa la funzione remove(); sul frame di youtube e, una volta chiuso l’overlay usa append() o insert() per “rimettere” il codice di youtube al suo posto (questo per essere pronto per una nuova visualizzazione).
Ciao, ho lo stesso problema, ma si tratta di una colonna sonora con plugin quicktime (anche se è probabile che verrà sostituito da un altro player). Quando chiudo la finestra modale la musica continua a scorrere fino a che non aggiorno la pagina madre. Mi servirebbe che si chiudesse in automatico, evitando il refresh direttamente appena clicco sulla x, ma non so dove esattamente intervenire.
Mi rendo conto che è un post vecchio ma spero in una risposta!
Ciao e complimenti per l’articolo, molto chiaro.
Chiedo un chiarimento se qualcuno mi sa dare una mano.
Richiamando l’apertura dell’overlay all’interno di una funzione con delle elaborazioni di qualche secondo (chiamata HTTPRequest) al suo interno, notavo che l’overlay non compariva fintanto che non era terminata l’esecuzione di tutti i comandi della funzione anche se il comando era prima (classico loader).
Il tutto funziona invece come mi aspetto se anzichè usare i .fadeIn uso .show()… Sbaglio qualcosa io oppure il .fadeIn ha qualche giustificazione per partire dopo che è stata eseguita tutta la funzione.
Grazie
Onestamente non saprei massimo hai provato a vedere cosa dicono nella docs ufficiale di fadeIn();? magari trovi qualche risposta 😉
Grazie per aver condiviso questo post, ho risolto un problema che mi affligeva da giorni.
Ora vorrei domandarti un’altra cosa.
Devo passare il valore di un campo html di un form ad un’altro form che viene richiamato tramite fancybox.
MI puoi aiutare.
Grazie.
Ciao Riccardo,
avrei bisogno di tue indicazioni a riguardo. Intanto ti faccio i complimenti per il post che hai pubblicato, semplice e di immediata comprensione. Ti chiedo come rendere dinamico l’overlay e come passare un parametro. Ad esempio ho un elenco di utenti e vorrei creare un overlay riepilogativo con le informazioni di ogni utenti.
Sul link ho l’id dell’utente, ma non so come passarlo.
Puoi aiutarmi a riguardo?
Grazie.
Ciao Riccardo, complimenti per la guida, ho cercato per giorni qualcosa del genere e solo tu sei riuscito a scrivere uno script semplice.
Volevo chiederti, io ho un motore di ricerca in php, ora per ogni risultato trovato voglio che si apra un box, ma se clicco su qualsiasi risultato mi apre lo stesso box. Come faccio?
Devi differenziare gli ID 😉
Ciao , complimenti per l’articolo. La mia domanda riguarda il SEO, mi spiego.
Con questa tecnica da te illustrata c’è uno o più div (a seconda di quanti overlay diversi si vogliano aprire nella pagina) che contengono testo ma che sono invisibili.
Ho letto da qualche parte che gli spider quando analizzano la pagina leggono soltanto il codice html/css e non javascript, inoltre vengono penalizzate quelle pagine che hanno testo nascosto.
Nel nostro caso testo nascosto ce n’è e viene attivato solo tramite javascript. Pertanto mi viene da pensare che un sito che contiene questa modalità overlay verrà sicuramente penalizzato..
Non so se mi sono spiegato chiaramente.
Ciao Andrea domanda più che giusta, tuttavia la Bad practice seo che hai enunciato si riferisce a un flood eccessivo di parole chiave nascoste all’interno della pagina. Ovvero se noi scrivessimo qualcosa di questo tipo:
web,web design,web developing,web download, archivio web, web web web !!!
Si usava fare qualche anno fa sopratutto nei footer della pagina. Nascondendo un paragrafo del genere con display:none o visibility:hidden allora verremmo penalizzati in quanto TUTTA LA PAGINA avrebbe una densità di keyword troppo elevata e sospetta. Tuttavia se usi invece l’overlay per ragioni “normali” puoi stare tranquillo 😉
NOTA: Fai conto anche che questa tecnica di overlay ormai è entrata nell’uso quotidiano di tutti i major e non solo (Bootstrap, Foundation etc), pertanto non avrebbe senso penalizzare nessuno.
Ciao Riccardo grazie della risposta. A questo punto mi viene in mente una cosa.
Poichè il contenuto degli overlay non deve essere visualizzato subito all’apertura della pagina , ho deciso di caricarne il contenuto con il metodo load() di jquery.
A questo punto però mi è sorto un altro dubbio:
partendo dal presupposto che javascript non viene interpretato , tutto il contenuto degli overlay non verrà visualizzato e quindi non indicizzato. Giusto ?
Ciao, sto usando il tuo script, ma ho un problema, il tooltip quando clicco sulla x non si chiude, o meglio si chiude e si riapre,
mentre volevo chiederti per farlo funzionare su 32 bottoni ai quali ogni volta che si apre il tooltip ognuno di essi ha un sequenza di immagini diversa , come devo fare? 😀
Usa la nuova versione come consigliato all’inizio dell’articolo:
http://www.targetweb.it/gestire-e-creare-overlay-popup-dinamici-con-jquery-trgreveal-plugin/
ciao sto cercando di capire il funzionamento di questo overlay.
Vorrei solo capire che paramentri mi posizionano il testo del title-box e il testo-box nel box appunto.
Grazie mille..
Ma se voglio appliacre l’overlay a box diversi, come posso fare?
Ciao ragazzi, vorrei chiedervi una cosa sto usando molto i popup con overlay, siccome sto realizzando un sito per una azienda che pubblica molti dei suoi contenuti su social come facebook o twitter avrei bisogno quindi di avere un link preciso del popup con i suoi contenuti in modo che: questi copiano il link e lo pubblichino sul social, viceversa quando una persona clicca sul link nel social apre il sito con automaticamente già aperto il popup, è possibile? ringrazio in anticipo
Ciao,
anzitutto complimenti per la guida.
Ho un problema. Al momento dell’apertura della popup mi fa uno scroll automatico in cima al sito.
Come risolvere?
Grazie
Ciao Riccardo, ho provato altre volte ad inviarti email, senza risposta, ci riprovo sperando di essere più fortunato.
Prima di tutto, i miei complimenti, sto provando ad imparare jquery, un po ostico all’inizio.
ho scaricato questo tuo mini tutorial per esempio, ed ho già trovato il primo intoppo, forse puoi aiutarmi.
Sto cercando di usare il tuo popup lo ma no riesco a capire come far passare una variabile ID al popup. mi spiego meglio con due righe di codice.
echo ‘
‘.$nome.’
Calcio a ‘.$giocatori.’
‘.$registrati.’ giocatori ‘.$contest.’
‘;
}
echo ‘
‘;
echo ‘
‘;
}
scusa nella precedente email è partita per errore ma era incompleta.
da un elenco di nomi di squadre ho un link con il codice della squadra (id_squadra)
se clicco nell’icona, devo portare nel popup il numero di id per elencare i giocatori
della formazione di tale squadra. NON CI RIESCO!!
l’unico codice è sempre e comunque l’ultimo record letto dalla tabella.
Ciao Riccardo, bellissimo articolo,
volevo chiederti una cosa in piu da applicare in questo overlay, si puo fare che questo overlay si apra solo la prima volta che accedi al sito in automatico? e non che si apra ogni volta che entri in sito? ho letto in giro che bisogna utilizzare i cookie, ma non so come applicare bene sul tuo.. mi puoi dare una mano?
Grazie infiinite!
Ciao , complimenti per l’articolo. La mia domanda riguarda la possibilità di avere diversi “cursori” in grado di aprire diversi moduli di testo. Ho provato a farlo mettendo nel div apri un immagine. La cosa viene ma purtroppo tutte le immagini che ho inserito (vicine tra loro) aprono l’ultimo box segnalato sia nell’html sia nella css. I trigger sono denominati diversamente, ovviamente. Come posso fare per avere diversi box per le diverse immagini di apertura?? Grazie mille!
Ciao , molto utile…
io sto provando ad inserire una cosa diversa che funziona e non riesco a centrare .
Sono alle prime armi e sarei grato se qualcuno potesse darmi una mano.
Nel sito okilprezzoegiusto.eu in alto, appena sotto il menu, ci sono 3 lettere maiuscole “PRO”…..
Ciao Riccardo,
ti chiedo aiuto, ho bisogno di prendere dell’overlay solo il contenuto di “Titolo del box”, e inserirlo in altra pagina, come devo fare?
Questo il mio caso specifico:
Ho assegnato una $ al titolo box, così:
$pippo=”nomeofferta”
richiamando la $pippo, però mi scrive -nomeofferta – e NON il suo contenuto
Ti ringrazio per l’aiuto che vorrai darmi. ciaooo
Complimenti Riccardo,
sei molto in gamba!
Gentilmente, ho una domanda da farti: Ho intenzione di realizzare delle aperture a diverse finestre Overlay con messaggi personalizzati (come un menu’). Posso gestire l’apertura dei differenti box con un “Case Of” oppure mi conviene dichiarare una variabile nel div? Te lo chiedo perchè non conoscendo il linguaggio php, non saprei come collegare l’iterazione.
Magari se riesci a buttare giù una bozza, ti sarei grato.
Grazie mille per i tuoi tutorial!
Ciao
ciao,
una bella guida leggera, sintetica e precisa, provo il codice appena possibile; apprezzo molto l’impegno che hai messo nelle tante precisazioni e risposte ai commenti.
Ciao e grazie di questo delucidante articolo.
Studiando anche la tua pagina ‘demo’ ho notato (html) che il tag viene chiuso ma non viene mai aperto.