Realizzare un popup lightweight in CSS3 e jQuery

Pubblicato il

Categoria: Programmazione

Realizzare un popup lightweight in CSS3 e jQuery
LinkedIn0

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://www.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 &amp;&amp; $('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!

LinkedIn0