Corsi on-line

Creare una finestra overlay con jQuery

Vediamo come creare una semplice finestra overlay (una specie di pop-up) che si sovrapponga ai contenuti della nostra pagina. Per realizzare questo effetto utilizzeremo la libreria jQuery che, come al solito, ci facilita la vita.
Per prima cosa apriamo il codice HTML della nostra pagina web e andiamo ad inserire, in un punto qualsiasi (suggerisco subito prima della chiusura del tag body) il markup relativo alla nostra finestra overlay:

<div id="fpol">
  <div class="finestra">
    <div class="chiudi"><a id="chiudi_fpol" href="#"><img src="close.jpg"/></a></div>
    <div class="testo">bla bla bla...</div>
  </div>
</div>

Il div con id "fpol" (che ho utilizzato come acronimo di Full Page OverLayer) è il contenitore della nostra finestra la quale resterà nascosta sino a quando non verrà esplicitamente richiamata (ad esempio a seguito del click su un link).
Sempre all’interno della nostra pagina andiamo ad aggiungere, nel punto che preferiamo, un semplice link che scatenerà l’apertura della finestra overlay:

<a id="apri_fpol" href="#" >Clicca qui!</a>

Ora vediamo il codice CSS che dovremo aggiungere al nostro foglio di stile:

div#fpol { position: absolute; top: 0; left: 0; width: 100%; z-index: 98; display: none; text-align:left; }
#fpol .finestra { position: absolute; width: 500; height: 200; top: 50%; left: 50%; margin-top: -100px; margin-left: -250px; z-index: 99; background: #333333; }
#fpol .finestra img { border: none; margin: 5px;}
#fpol .finestra .chiudi { text-align: right; }
#fpol .finestra .testo { padding: 5px; color: #FFFFFF; }

Come potete vedere lo stato iniziale del div contenitore è nascosto (display: none).
Vediamo infine il codice jQuery che effettuerà la magia:

$(document).ready(function(){
  // Aggiusto la larghezza del contenitore impostandola a tutta pagina
  $("#fpol").css("height", $(document).height());

  // Quando il link viene cliccato apro la finestra overlay
  $("#apri_fpol").click(function(){
    $('html, body').animate({ scrollTop: 0 }, 0, function() {
      $("#fpol").fadeIn();
      return false;
    });
  });

  // Quando viene cliccato il link di chiusura... chiudo!
  $("#chiudi_fpol").click(function(){
    $("#fpol").fadeOut();
    return false;
  });
});
 
// Aggiusto l'altezza del contenitore in caso di resize della finestra del browser
$(window).bind("resize", function(){
  $("#fpol").css("height", $(window).height());
});

Semplice ed efficace. Se non avete bisogno di soluzioni particolari, questo scriptino è quello che fa per voi!

Post correlati
  • Grazie. Dopo 4 articoli sull’argomento, ho finalmente trovato il tuo: l’unico che funziona!! 🙂

I più letti del mese
Tematiche