Popup, lightbox e finestra modale con jquery

I Popup con Jquery si sono diffusi molto non solo per le gallerie di immagini ma anche per visualizzare:

  • Finestre con contenuti pubblicitari
  • Form per la raccolta di Email e iscrizioni a Newsletter
  • Form di contatto
  • Box informativi

La forza di queste finestre modali o Popup è quella di non far abbandonare la pagina al navigatore e proporgli un contenuto fuori dal contesto della pagina in modo accattivante, lo sfondo viene oscurato dando risalto al nostro box.
Il Popup può essere chiuso cliccando al di fuori della finestra oppure cliccando su un apposito pulsante chiudi.

Per implementare i PopUp con JQuery esistono in Internet script e plugin gratuiti come SimpleModal che fornisce anche diverse demo ed esempi di Popup con Jquery e Javascript.
Qui un articolo molto chiaro spiega come implementare un Popup con Jquery.
Sul mio sito ho creato una finestra PopUp con le seguenti caratteristiche:

  1. Apertura ritardata dopo 3 secondi dal momento in cui il navigatore ha caricato una pagina con la funzione setTime
  2. Apertura soltanto la prima volta che si visita il sito, se il navigatore sfoglia altre pagine non rivedrà più il popup, questo viene fatto attraverso l’uso delle sessioni e dei Cookie
  3. Caratteristiche del Popup JQuery definite da un CSS esterno
  4. Possibilità di inserire nella finestra qualsiasi contenuto, immagine o video.

Tag: ,


Graziano

Consulente web marketing e web Designer, si occupa di creazione siti e portali dinamici con Joomla e Wordpress, Restyling e revamp siti esistenti, campagne pubblicitarie online, Social media marketing, strategie di posizionamento sui motori di ricerca, analisi e consulenza, Ecommerce, cataloghi online autogestibili, soluzioni per il turismo, grafica, corsi e lezioni su Joomla, Wordpress, Seo e Html.

Commenti (3)

  • Ciao, non è così semplice non è solo un codice da mettere nell’html ci sonoanche i JS da caricare e vanno valutati in base al tipo di situazione. S e interessati posso guardare ma non posso farlo gratuitamente. ciao

  • E’ da un bel pò che del codice da incollare nella pagina di apertura del mio sito per aprire come sul tuo una finestra con img e testo del mio sponsor. Sono autodidatta, non ho grandi conoscenze quindi ti chiedo la gentilezza di fornirmi, se puoi, tutto il codice da inserire nella prima pagina del mio sito. Grazie infinite e saluti.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Co-Working Login

Via Stefanardo da Vimercate 28
20128 Milano (MI) - Italy
  • [+39] 02.871.65.381
  • info@gdmtech.it
  • PI 00865500144
  • CF DMEGZN73A10F205M

Philosofy

I nostri clienti sono aziende e professionisti che vogliono sfruttare Internet per trovare nuovi clienti, aumentare i loro contatti, vendere i loro servizi e prodotti. Oltre alle normali attività di Web Design siamo esperti di ottimizzazione per i motori di ricerca e Digital Marketing. Ci occupiamo di corsi di web marketing in azienda, sviluppo di e-commerce con Opencart e Prestashop e Woocommerce, siti web in Wordpress e Joomla, migrazioni.
Gdmtech - Digital Web Agency Milano
Privacy Policy