Una finestra pop-up con jquery

Molto spesso chi sviluppa applicazioni web ha la necessità di mostrare temporaneamente alcune informazioni, senza però far cambiare pagina all’utente. Ecco perchè in queste occasioni tornano molto utili i pop-up, ovvero delle finestre che contengono del testo e compaiono in seguito a determinate azioni compiute dall’utente.

In una nostra applicazione web sviluppata di recente avevamo proprio questa necessità. Abbiamo perciò utilizzato inizialmente il solito plugin di jQuery: fancybox. I plugin che consentono di realizzare pop-up in javascript sono molti e ognuno ha i suoi pregi e i suoi difetti. Noi di Glocalmedia abbiamo scelto fancybox perchè fornisce un buon impatto grafico e allo stesso tempo i file necessari per farlo funzionare non sono estremamente pesanti.

L’applicazione di cui si parlava in precedenza però non è un sito web pubblico, bensì un software interno, quindi l’aspetto della funzionalità ha il privilegio sull’estetica della pagina .

Senza tralasciare i requisiti di buona usabilità dell’applicazione abbiamo deciso di realizzare la finestra pop-up, senza l’ausilio di plugin aggiuntivi, per rendere il codice più snello e leggero.

Di seguito spiegheremo i passi da compiere per creare una finestra a comparsa “fatta in casa”.

Il primo passo è quello di includere il file javascript di jQuery, che ci servirà per selezionare e manipolare gli elementi html della pagina (questo abbiamo ritenuto sia necessario per risolvere i problemi di compatibilità tra i vari browser, cosa che jQuery fa discretamente bene):

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>

Ora dobbiamo inserire all’interno del tag “body” il div che rappresenta il nostro pop-up (e che nasconderemo al caricamento della pagina). Assegniamogli ad esempio l’id “infobox”:

<body>
   <div id="infobox"></div>
</body>

Fatto ciò possiamo scrivere la funzione che ci servirà per caricare un contenuto via ajax all’interno del nostro pop-up:

function showPageInInfobox(href){
   infobox_shown=false;
   $("#container").fadeTo("fast",0.3);
   $("#infobox").html('');
   $("#infobox").show();
   var top=(screen.height/2)-200;
   var left=(screen.width/2)-100;
   $("#infobox").css({'left':left,'top':top});
   $("#infobox").load(href,function(){
      infobox_shown=true;
   });
}

Il parametro “href” conterrà l’indirizzo della pagina da caricare all’interno del div.

Quindi scriviamo il solito codice per attivare jQuery (racchiuso nei tag <head></head> ) e richiamiamo la funzione appena scritta, sull’evento click di determinati link (che distingueremo tramite un’apposita classe css denominata “popup-link”):

$(document).ready(function(){
    /*Nascondiamo il div popup*/
    $('#infobox').hide();

    /*Facciamo in modo che quando il popup e' aperto, sia possibile chiuderlo con un click del mouse o con la pressione di un tasto al di fuori del popup*/
    var infobox_shown=false;

    $("body").keypress(function(){
        if(infobox_shown){
            $("#infobox").hide();
            infobox_shown=false;
            $("#container").fadeTo("fast",1);
        }
    });

    $("body").live("click",function(){
        if(infobox_shown){
            $("#infobox").hide();
            infobox_shown=false;
            $("#container").fadeTo("fast",1);
        }
    });

    /*Al click sul link con classe "infobox-link" attiviamo la visualizzazione del contenuto linkato dal link stesso*/
    $('.infobox-link').click(function(e){
        e.preventDefault();
        showPageInInfobox($(this).attr("href"));
    });
});

Se volete personalizzare ulteriormente il pop-up, assegnandogli uno sfondo e un colore al testo, potete scrivere all’interno del foglio di stile (css) le istruzioni necessarie, ad esempio:

#infobox{background:#ffffff;color:#000000;border:1px solid #494949;}

Con poche righe di codice abbiamo così realizzato una finestra pop-up a comparsa, che carica una pagina al click su un link.

8 Commenti su “Una finestra pop-up con jquery”

  • esgraphicstudio scrive:

    Salve,
    si possono avere più popup nella stessa pagina?
    come si può personalizzare il codice in questo caso?
    Grazie

    • Davide scrive:

      Buongiorno,
      non abbiamo mai provato ad aggiungere più di un popup nella stessa pagina. Teoricamente e tecnicamente la cosa è possibile, bisognerebbe però provarla. Per aprire più popup si dovrebbe modificare la funzione “showPageInInfobox(href)” parametrizzando l’id del div che rappresenta il pop-up (nel nostro caso è fisso ed è “#infobox”), così facendo la funzione potrebbe essere utilizzata per aprire un numero illimitato di finestre.

  • francesca scrive:

    Ciao Davide,
    sono una super principiante della programmazione, quindi scusa sin d’ora le domande che ti porrò.

    Sarebbe possibile vedere il listato completo della pagina con una demo funzionante? Evidentemente non posiziono correttamente gli script e non esce nessun popup.

    Grazie in anticipo. Francesca

    • Davide scrive:

      Ciao, guarda il listato completo del codice non è altro che una pagina html con all’interno il codice dei riquadri. Assicurati di mettere il link al file .js di jquery all’interno del tag “head”…
      Ti consiglierei di seguire prima un tutorial su come iniziare con jquery, che puoi trovare qui

  • Stefano scrive:

    Il problema è che il parametro “href” dovrebbe essere dinamico; nel mio caso le info che stanno nel balloon di GMaps sono dinamicamente caricate da un file KML il quale viene creato al volo da uno script php che esegue una query di una table MySql . Alcune di queste informazioni sono degli url per cui quando, dall’interno del ballon, fai clic su uno di questi url dovrebbe partire la popup. Insomma c’è qualcosa cce mi sfugge.

    • Davide scrive:

      Ciao, secondo me il problema non sta nel link, ma nell’evento del click del link.
      jQuery riconosce tutti gli eventi su oggetti html presenti al momento del caricamento della pagina. Aggiungendo quindi un link in seguito, per jquery è come se quel link non esistesse.
      Per rendere il link “visibile” a jquery bisogna usare l’evento live(‘click’,function(){…}). A questo punto jquery dovrebbe scatenare l’evento click. Spero di essere riuscito a spiegarmi :-)

  • massimo scrive:

    e se volessi farla aprire quando ha caricato la pagina!?

    come fanno qui: http://www.yuourinspirationweb.com

    • Davide scrive:

      dovrebbe bastare richiamare la funzione “showPageInInfobox(LINK ALLA PAGINA)” all’interno del $(document).ready()…

Lascia un commento