Realizzare un popup lightweight in CSS3 e jQuery
Quando realizziamo un sito, talvolta potremmo volere dei contenuti che compaiono all’interno di un popup, per esempio un form di login o schede prodotto. Sul web esistono diverse soluzioni molto efficaci, come Colorbox o Fancybox, ma richiedono naturalmente l’uso di librerie esterne.
Con il post di oggi, vorrei illustrarvi come realizzare un popup lightweight senza dover installare plugin aggiuntivi e scrivere pochissimo codice di scripting, utile se si desidera avere un numero limitato di popup da inserire nel proprio sito. Troverete l’esempio completo a questo link.
La struttura HTML
Come primo passo, stabiliamo quali saranno gli elementi coinvolti nella realizzazione del popup. Inseriamo innanzitutto il link che scaturirà l’evento.
<a class="popup-link" href="#" data-popup-target="#example-popup" rel="noopener noreferrer">Clicca per vedere il popup in azione</a>
Noterete che ho usato un data-attribute, un dato utilizzato per inserire al suo interno qualsiasi informazione che può risultarci utile nello sviluppo (trovate qui la specifica). In questo caso, ho inserito l’id del popup che voglio sia aperto al click.
Il secondo elemento sarà quello che oscurerà la parte visibile di schermo:
<div class="popup-overlay"></div>
Infine, inseriamo il markup del nostro popup:
<div id="example-popup" class="popup">
<div class="popup-body">
<span class="popup-exit"></span>
<div class="popup-content">
<h2 class="popup-title">Simple lightweight popup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper nulla et gravida interdum. Quisque dignissim a turpis at posuere. Praesent cursus turpis magna, quis pulvinar est vehicula</p>
</div>
</div>
</div>
Il popup è costituito da un elemento con classe “popup-exit”, che sarà il classico pulsante X per chiudere il popup, e il corpo “popup-content”, in cui possiamo inserire tutto il contenuto desiderato. L’uso di due div intorno a questi ultimi, rispettivamente con classe “popup” e “popup-body” è dovuto alle transizioni che applicheremo per la comparsa/scomparsa del popup.
IL CSS e le transizioni
Realizzata la struttura degli elementi costitutivi, diamogli ora lo stile con cui il popup dovrà apparire e il comportamento alla comparsa sfruttando le transizioni di CSS3.
Cominciamo dall’elemento “oscurante” del sito:
.popup-overlay {
width: 100%;
height: 100%;
position: fixed;
background: rgba(196, 196, 196, .85);
top: 0;
left: 100%;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}
Questo elemento avrà una larghezza ed un’altezza pari alla finestra visualizzata, con posizione fissa. Essendo già all’interno della pagina dobbiamo renderlo non visibile se non quando si visualizzerà un popup: gli diamo quindi opacità nulla e posizione fuori dallo schermo, per non farlo sovrapporre agli elementi della pagina. Infine, utilizziamo le transizioni di CSS3 per stabilire su quale proprietà influire ad un cambio di stato del popup: in questo caso un ease-out di 2 decimi di secondo sull’opacità. Trovate approfondimenti in merito sulla documentazione W3C.
Inseriamo ora le proprietà del popup:
.popup {
position: fixed;
top: 25%;
left: 50%;
z-index: -9999;
}
.popup .popup-body {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
opacity: 0;
min-height: 150px;
width: 400px;
margin-left: -200px;
padding: 20px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
position: relative;
-moz-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
-webkit-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
text-align: center;
border: 1px solid #e9e9e9;
}
.popup .popup-exit {
cursor: pointer;
display: block;
width: 40px;
height: 40px;
position: absolute;
top: -20px;
right: -20px;
background: url(https://nuovo.artera.net/wp-content/uploads/2013/06/x-btn.png) no-repeat;
}
Qui diamo al padre di classe “popup” una posizione desiderata e uno z-index negativo, in modo che esso vada a nascondersi dietro qualunque contenuto della pagina. All’elemento figlio “popup-body” diamo invece le proprietà del popup a cui diamo un’opacità nulla e una transizione come per “popup-overlay”. Creiamo anche l’elemento per l’uscita del popup, alla classe “popup-exit”.
Diamo infine un po di look ai contenuti del popup:
body {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
color: #444;
}
.popup-content .popup-title {
font-size: 24px;
border-bottom: 1px solid #e9e9e9;
padding-bottom: 10px;
}
.popup-content p {
font-size: 13px;
text-align: justify;
}
Giunti a questo punto, dobbiamo stabilire quali saranno le classi che renderanno i nostri elementi visibili. Il CSS sarà il seguente:
.overlay .popup-overlay {
opacity: 1;
left: 0
}
.popup.visible, .popup.transitioning {
z-index: 9999;
}
.popup.visible .popup-body {
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
Lo script
Siamo quasi pronti, ci manca solo di vedere il popup in azione. Al caricamento della pagina, inseriamo:
jQuery(document).ready(function ($) {
$('[data-popup-target]').click(function () {
$('html').addClass('overlay');
var activePopup = $(this).attr('data-popup-target');
$(activePopup).addClass('visible');
});
});
Con questo codice, al click di qualsiasi elemento con data-attribute “data-popup-target”, aggiungiamo una classe overlay al tag HTML per oscurare il contenuto con il nostro div di classe “popup-overlay” e preleviamo il valore in esso contenuto che abbiamo detto essere l’id del popup da rendere visibile. Assegnamo infine a quest’ultimo una classe “visible”. Se tutto è andato per il verso giusto, al click del link visualizzerete il vostro popup.
Ci manca ora l’uscita dal popup, che andrebbe fatta nel momento in cui un utente clicca sulla X, fuori dalla finestra del popup o premendo il tasto ESC da tastiera. Per farlo dovremo rimuovere le classi attivate per la visualizzazione del popup con un accorgimento: se riportiamo lo z-index del popup a 0, non avremo modo di di vedere la transizione applicata con i CSS in uscita. Aggiungiamo quindi una classe temporanea “transitioning” per la durata dell’uscita di scena del popup:
function clearPopup() {
$('.popup.visible').addClass('transitioning').removeClass('visible');
$('html').removeClass('overlay');
setTimeout(function () {
$('.popup').removeClass('transitioning');
}, 200);
}
Inseriamo infine i listener per gli eventi che vi ho citato prima per uscire dal popup:
$(document).keyup(function (e) {
if (e.keyCode == 27 && $('html').hasClass('overlay')) {
clearPopup();
}
});
$('.popup-exit').click(function () {
clearPopup();
});
$('.popup-overlay').click(function () {
clearPopup();
});
Se ve lo siete perso, ecco qui il codice completo.
Conclusioni
Come già anticipato, sul web esistono numerose risorse da cui possiamo attingere per ottenere un risultato voluto. Per amor dell’ottimizzazione però, vale la pena trovare soluzioni che possano essere più adeguate ai specifici casi. Lascio a voi l’ardua sentenza!
Senza passare dal link, come lo apri con ?
Senza passare dal link, come lo apri con – body onLoad=”” – ?
Ciao Giancarlo,
a seconda del caso si adotta una particolare soluzione, ma rispondendo in modo generale alla domanda è sufficiente dare la classe “visible” al popup che vuoi visualizzare e la classe “overlay” al body, cosa che può essere fatta sia da markup sia da JQuery.
Se non ti è chiaro qualcosa chiedimi senza problemi
Mi sembra che vada fatto dal js.
Credo che data-popup-target possa essere rimosso, in questo caso.
Comunque ho messo
if (e.keyCode == 27 && $(‘html’).hasClass(‘visible’)) { clearPopup(); }
ora pare ci sia solo qualche problema a livello di css.
Ciao Giancarlo, dipende un po’ quale sia il tuo obiettivo. Vuoi avere un singolo popup in tutto il tuo sito che si visualizzi solo al caricamento della pagina? Allora in questo caso puoi rimuovere il data attribute e la funzione click(), lasciando quindi solamente:
$(‘html’).addClass(‘overlay’);
$(‘#id-popup’).addClass(‘visible’);
Il resto del codice resterebbe invece così com’è.
Fammi sapere!
Semplicemente, al caricamento di una pagina (in questo caso la homepage), si deve vedere un messaggio.
Quando l’utente clicca la X, vede la pagina al naturale.
Quindi, ok rimuovere dal js
$(‘[data-popup-target]’).click(function () {
$(‘html’).addClass(‘visible’);
var activePopup = $(this).attr(‘data-popup-target’);
$(activePopup).addClass(‘overlay’);
});
Premetto che se uso lo script attraverso un link, come nel tuo esempio, funziona perfettamente.
Ma diversamente non riesco a farlo girare correttamente.
A me gira nel modo corretto facendo la sostituzione, guarda qui: http://jsfiddle.net/emilymeroni/yuGFr/ dovrebbe essere il codice che fa al caso tuo
Ti ringrazio veramente. Con l’ultima modifica del js è tutto a posto.
Ora devo risolvere il problema z-index.
Se vuoi vedere dove l’ho applicato: missover.it
Ciao Giancarlo,
mi sembra che ti manchi questa parte di codice css:
.popup.visible, .popup.transitioning {
z-index: 9999;
}
e il markup <div class=”popup-overlay”></div>
Fammi sapere se cosi si risolve
Mi sento un po’ pirla… avevo dimenticato il markup.
Sarà la vecchiaia…
Grazie mille per l’aiuto.
Ci mancherebbe 🙂
Salve Emily,
ho cop-incollato, da bravo programmatore alle primissime armi, il codice del tuo pop up.
Cliccando sul link “dummy” che dovrebbe richiamarlo, il background correttamente si scurisce, ma il pop up ha un comportamento inatteso: cliccando con il mouse sulla X di chiusura o nelle restanti parti della pagina (tranne che naturalmente sul pop up stesso) non riesco a tornare alla pagina principale, cosa che invece riuscivo a fare dalla pagina dove hai inserito l’esempio completo. Con il tasto ESC, invece, pare funzionare tutto correttamente. Idee su dove posso aver sbagliato?
Grazie mille,
S
Scusami per il disturbo, Emily, avevo dimenticato di chiudere un TAG.
Vado a nascondermi per la vergogna… 🙂
Grazie comunque,
S
RiCiao Emily,
nel mio caso, dentro il pop up ho inserito il link a una pagina web esterna che contiene solamente un video che ho storato in locale. Chiudendo il pop up, il video non si stoppa, ma continua in background… Cercando su WEB ho trovato almeno 3 modi diversi coi metodi close(), remove(), empty(), ma nessuno pare funzionare (ma è più probabile che non abbia capito io come fare 🙂 )
Un aiutino please?
ri-grazie mille,
S
Ciao Stefano, per risolvere il tuo problema dovresti aggiungere la chiamata del metodo pause() sul video (se usi html5 – cfr: http://diveintohtml5.info/video.html#markup) alla chiusura del popup (nella funzione clearPopup del codice nel post)
E se volessi inserire un modulo di contatto…
Salve chiedo aiuto perchè ho inserito questo funzionamento dei popup all’interno di un menù per cui praticamente ho dato al data-popup-target l’id popup1, popup2, popup3 eccetera… per ogni div che deve essere richiamato.
Il funzionamento è perfetto se passo da popup1 a 2 a 3, eccetera, ma se provo a farlo al contrario, cioè avendo già aperto il div successivo, non mi consente di riaprire quelli precedenti, cioè se sono arrivata ad aprire il popup3 non posso più riaprire popup1 e popup2 a meno che non chiuda e ricominci da capo.
Salve, io avrei bisogno di apportare una modifica ma non sono pratico di javascript.
Nell’esempio il popup si attiva tramite un link con data-popup-target e si chiude con la classe popup-exit su di uno span. A me però servirebbe che lo stesso link, prima aprisse e poi chiudesse il popup. Come posso modificare lo script?
Grazie in anticipo.
Ciao, ho provato ad inserire il tutto nella pia pagina web di prova ma non funziona… puoi dirmi se sbaglio qualcosa? Grazie… (ps: sono un neofita) 🙂
Ciao nik, in realtà vediamo correttamente il popup all’apertura della pagina!
Ciao, sono un autodidatta ed ho usato il bellissimo script da voi creato. ci sarebbe un piccolo problema riscontrato nel mio caso.
La chiamata al popup la ho messa in fondo pagina e succede che l’attributo href impostato su # mi riporta in alto nella pagina. c’è un modo per evitare che succeda cio? 🙂
questo proget si puo usare modificare e adatate per un sito comerciale… grazie mille buona giornata.
Ciao. Vorrei un consiglio. Premetto che nn so nulla di linguaggi.. All’eccesso di un sito Vorrei semplicemente creare un popup in cui si ha come sfondo un’immagine e in sovrapposizione 2 bottoni enter+18 /exit – 18, bottoni fatti da me a cui associate il link rispettivamente prosegui/esci. Il sito è creato in word press.. Per fare il popup ho usato il plug in ITRO POPUP (anche se spunto RESPONSIVE riesco a costruire il popup ma funziona solo da pc mentre da cellulare i bottoni spariscono ) aspetto tua gentile risposta