Creare un popup/overlay lightbox personalizzato (popup immagini/testo/qualsiasi cosa) con jQuery

Stanchi di cercare script che facciano al caso vostro? Un semplice popup richiede un’intera libreria la quale, una volta caricata, va in conflitto con una versione precedente o successiva di jQuery che utilizzate per un altro script?
Fatevi il vostro popup personalizzato!

Tecnicamente si chiama Overlay, poiché compare sopra l’intero sito. Con poche righe otterrete un ottimo risultato!

Lo script si basa su pochi semplici passaggi: il codice css che darà lo stile al nostro popup, i div che conterranno il contenuto del popup e il codice jQuery, facile ed intuitivo.
Questo script non è stato studiato per slideShow, anche se con un pò di “smanettamento” si riesce a fare e senza troppi problemi.

Iniziamo con i div necessari:

<!-- Il seguente div conterrà lo sfondo del popup -->
<div id="overlay" class="overlay" style="display:none;"></div>
<!-- Nel div con id "box" è il popup vero e proprio. Qualsiasi contenuto è permesso! -->
<div id="box" class="box">
     <h1 class="titolo_box">Titolo Popup</h1>
     <p class="testo-box">Contenuto del Popup/Overlay</p>
     <p class="testo-box">Potete inserirci quello che volete: foto, iframe, tabelle, filmati youtube... non pensate che sia un popup ma una parte di pagina</p>
     <hr />
     <p class="chiudi">X</p>
</div>

Questo codice mettetelo dove volete, non farà differenza.

Passiamo al codice jQuery:

<script type="text/javascript">
     $(".apri").click(function(){
         $('#overlay').fadeIn('fast');
         $('#box').fadeIn('slow');
     });

     $(".chiudi").click(function(){
          $('#overlay').fadeOut('fast');
          $('.box').hide();
     });

     //chiusura cliccando fuori dal popup
     $("#overlay").click(function(){
          $(this).fadeOut('fast');
          $('.box').hide();
     });
</script>

Nel mio caso ho creato una funzione per l’apertura (non presente in questo esempio), visto che ho molteplici div box da visualizzare a seconda di dove l’utente clicca.

Per ultimo il css:

<style type="text/css">
.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:299;
     cursor:pointer;
     /*Trasperenza cross browser*/
     opacity: .7; filter: alpha(opacity=70);
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
#box{
     width:600px;
     height:400px;
     margin:-200px 0 0 -300px;
     top:50%;
     left:50%;
     background-color:#FFF;
     display:none;
     z-index:+300;
     position:fixed;
     -moz-border-radius:15px;
     -webkit-border-radius:15px;
     border-radius: 15px;
}
</style>

E con questo avrete un bel popup/overlay personalizzato. Lo sfondo del popup si trova nell’ultima parte: “#box”, dove c’è anche la grandezza del contenitore popup/overlay e la centratura, data dai margini:

     width:600px;
     height:400px;
     margin:-200px 0 0 -300px;

Cambiate  i primi due valori per cambiare la grandezza del contenitore. Fate delle prove per vedere come funziona! Per centrarlo invece, se cambierete le dimensioni, dovrete anche modificare i margini, inserendo la metà della misura immessa.
Esempio semplice: nei dati immessi sopra l’altezza è 400 e la larghezza 600. Come margini dovremo mettere -200px per l’altezza, metà di 400, e -300px per la larghezza, metà di 600. Tutto qui.

Come dicevo prima, se volete fare molteplici popup, magari dopo un’estrazione di dati da mysql, basterà inserire il div con id ‘box’ nel ciclo e aggiungere all’id “box” l’id del valore estratto dal database. In jQuery invece dovremo convertire l’azione di click “apri” in una funzione.
In questo esempio ho creato la funzione “apri” che andrà richiamata dall’evento onClick del testo/immagine che esegue l’azione, passandogli come parametro l’id del box che andrà aperto:

function apri(id){
         $('#overlay').fadeIn('fast');
         $('#box'+id).fadeIn('slow');
}

Ricapitolando: un div fa da sfondo (il div con id “overlay”), uno o più box con id “box” (o in caso di molteplici box si aggiunge un numero sequenziale)  con all’interno qualsiasi contenuto si voglia far vedere nel popup/overlay, un codice css e un codice jQuery.

Tutto chiaro?  🙂

Annunci

, , , , , , , , , , , , , ,

  1. #1 di hdit89 il 25/01/2012 - 15:17

    mi sfugge una cosa, come faccio a farlo azionare? intendo, mi si apre automaticamente con la pagina o funziona come un lightbox? nel caso del secondo, basta che io faccia qualcosa stile nome oppure cosa?

    • #2 di portapipe il 25/01/2012 - 16:11

      Devi fare semplicemente un tag dove inserire un testo e applicargli la classe “apri”. In automatico verrà rilevato l’evento di click sul testo con classe apri e si aprirà. Se vuoi fare un div o un a href è uguale.

      • #3 di Alberto il 12/11/2015 - 11:45

        Non funziona.

      • #4 di portapipe il 12/11/2015 - 19:25

        Se ha funzionato per tutti per anni sicuramente funzionerà anche a te =)
        Hai importato correttamente la libreria jQuery? La versione è abbastanza recente?

  2. #5 di Nikito il 09/02/2012 - 15:42

    Non riesco a farlo funzionare! Mi puoi aiutare?

    http://www.lasquadradellasperanza.it/prova.html

    • #6 di portapipe il 09/02/2012 - 15:54

      Volentieri. Posso dirti subito che ti sei dimenticato di aggiungere jquery 🙂

      • #7 di Nikito il 09/02/2012 - 16:00

        Ottimo vero! Però ora non mi va il tasto chiudi…

      • #8 di portapipe il 09/02/2012 - 16:05

        Controlla la versione di jquery, magari prendendo l’ultima versione da google (anche senza scaricarla ma aggiungendo il link di google al sito).

      • #9 di Nikito il 09/02/2012 - 16:24

        non va , hai controllato il codice della mia pagina?

      • #10 di portapipe il 10/02/2012 - 08:37

        Non c’è più la tua pagina!

  3. #11 di Max il 03/03/2012 - 21:58

    Ciao
    Mi dispaice ma non riesco a farlo funzionare in nessun modo, questa ela pagina di esempio

    Documento senza titolo

    $(“.apri”).click(function(){
    $(‘#overlay’).fadeIn(‘fast’);
    $(‘#box’).fadeIn(‘slow’);
    });

    $(“.chiudi”).click(function(){
    $(‘#overlay’).fadeOut(‘fast’);
    $(‘.box’).hide();
    });

    //chiusura cliccando fuori dal popup
    $(“#overlay”).click(function(){
    $(this).fadeOut(‘fast’);
    $(‘.box’).hide();
    });

    .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:299;
    cursor:pointer;
    /*Trasperenza cross browser*/
    opacity: .7; filter: alpha(opacity=70);
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;
    }
    #box{
    width:600px;
    height:400px;
    margin:-200px 0 0 -300px;
    top:50%;
    left:50%;
    background-color:#FFF;
    display:none;
    z-index:+300;
    position:fixed;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius: 15px;
    }

    Apri

    Titolo Popup
    Contenuto del Popup/Overlay
    Potete inserirci quello che volete: foto, iframe, tabelle, filmati youtube… non pensate che sia un popup ma una parte di pagina

    X

    Dove Sbaglio?
    Grazie

    • #12 di portapipe il 15/03/2012 - 22:38

      Non saprei così. Manca del codice. Se non riesci a utilizzarlo ti consiglio quelli già preimpostati come jQueryTools: http://jquerytools.org/demos/overlay/index.html

      • #13 di Emanuele il 08/12/2012 - 01:07

        Max le pagine non si creano con un copia e incolla, non è impaginata e non esistono tag, praticamente sbagli ovunque, studia per bene html 5 css3 e javascript. Naturalmente il commento non è per il creatore dello script, che funziona benissimo

  4. #14 di Davide il 27/05/2012 - 15:26

    Questo tutoria è il medesimo che ho trovato su un altro sito, e a me non funzionano entrambi.
    Dovrò trovare qualche altra soluzione.

    • #15 di portapipe il 04/10/2012 - 10:13

      Il medesimo la vedo dura visto che l’ho scritto di mio pugno. Ad ogni modo ci sono molti script ora che fanno le stesse cose con molta meno fatica in fase di programmazione

  5. #16 di carmine il 14/02/2013 - 11:04

    Ciao,grazie per la pubblicazione. Puoi indicarmi il modo per inserire più txt nella stessa finestra al click di più pulsanti nella stessa pagina? Se mi indicassi una funzione ad hoc mi faresti cosa gradita.
    Ti ringrazio.

    • #17 di portapipe il 14/02/2013 - 11:07

      Intendi più popup?
      Se cerchi qualcosa di già fatto ti consiglio di guardare script come jquery UI o similari

  6. #18 di carmine il 14/02/2013 - 12:46

    Mi spiego meglio: Ho già un pulsante che mi apre una finestra nella quale compare un testo che prelevo da un txt. Vorrei aggiungere altri pulsanti legati all’apertura di altri file txt. In pratica, a seconda del pulsante cliccato, testo diverso nella lightbox overlay.
    Spero di essere stato più chiaro. Grazie ancora

    • #19 di portapipe il 14/02/2013 - 15:23

      Basta che cambi gli id dei vari div e duplichi le funzioni jquery, così ne avrai differenti a cui collegarti.
      Se vuoi maggiori informazioni posso aiutarti tramite il mio forum, altrimenti qui viene troppo lunga da spiegare

  7. #20 di carmine il 16/02/2013 - 17:49

    ti ho postato la domanda sul forum……grazie

  8. #21 di migo80 il 10/06/2014 - 19:21

    ciao senti come posso modificarlo per fare in modo che l’overlay si apra all’apertura della home page?

  9. #25 di migo80 il 16/06/2014 - 16:20

    Grazie per la risposta ma sono riuscito gia a risolvere come mi avevi suggerito in precedenza.

  10. #26 di Gruppo 8 il 21/02/2015 - 19:41

    Grazie mille!
    Ottimo tutorial e molto utile! Possiamo dire che ci hai salvato la vita! ❤

    • #27 di portapipe il 21/02/2015 - 19:48

      Accipicchia! Doveva essere davvero importante!
      Ne sono felice 🙂 Buona serata!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: