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

30 commenti

  1. 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?

    • 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.

  2. 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

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

    • 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

  4. 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.

  5. 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

    • 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

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

  7. Ciao. Non essendo molto pratico di Jquery volevo chiederti se era fattibile eseguire una pagina esterna in un overlay… mi spiego meglio… Attualmente nella pagina 1 ho un bottone che richiama un popup che contiene la pagina 2. La pagina 2 ha una form per inserire dei dati che viene eseguita al momento del SUBMIT. Posso creare la stessa cosa con l’overlay? Ho provato alcune soluzioni che permettono di inserire il contenuto di una pagina esterna ma nel momento in cui eseguo il SUBMIT l’overlay si chiude e la query della pagina 2 non viene eseguita. Spero tu possa darmi una delucidazione. Saluti

    • Ciao Francesco.
      Penso che tu abbia comunque bisogno di un iFrame che contiene il contenuto dell’altro sito.
      Se usi gli embed potrebbe darti conflitto con il sito già esistente.
      Se nell’overlay metti l’iFrame con larghezza 100% e un’altezza a 80vh dovrebbe riempirti la pagina con il contenuto della pagina che ti serve.

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 )

Google+ photo

Stai commentando usando il tuo account Google+. 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 )

w

Connessione a %s...