Le applicazioni web stanno diventando sempre più sofisticate e somiglianti alle interfacce grafiche dei software offline e standalone in linguaggi come Java e C#. Uno degli elementi più interessanti è sicuramente il popup, finestrella che si apre di solito sopra una pagina che rimane in background. Lo HTML/CSS non prevede questo tipo di oggetto ma con JavaScript o framework simili è possibile aggirare l’ostacolo. Vediamo come realizzarla in JQuery.
In realtà i popup li abbiamo già trattati in queste pagine, parlando nella sezione JavaScript delle funzioni window.alet() (ad esempio qui) o le classiche window.prompt() e window.confirm(). Queste funzioni predefinite però hanno controlli e personalizzazione decisamente limitate mentre è perfettamente lecito che si abbia bisogno di popup complesse con svariati layout e tag, form e stili grafici ben delineati ed articolati con css. Dobbiamo quindi dotarci di uno strumento più complesso ma versatile. Vediamo come.
La pagina HTML
Cominciamo col costruire una semplice pagina HTML che apre il nostro PoP-Up. Abbiamo bisogno fondamentalmente di richiamare una funzione JS/JQuery, quindi possiamo equivalentemente creare un bottone o una qualsiasi area di schermo cliccabile ad evento come una semplice sezione o una immagine opportuna. Semplifichiamoci un po’ la vita per questo articolo e scegliamo un bottone generico, anche senza form di riferimento ma diamo un po’ di stile al nostro bottone, così da vedere in queste pagine non solo esempi sterili ma anche elementi e componenti da riutilizzare o a cui ispirarsi. Il codice HTML, è semplice e lineare dall’head che include css e script js, un file per la libreria jquery, una per le nostre funzioni specifiche.
<!doctype html>
<html lang="it">
<head>
<title>Test Pop-Up</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/script.js'></script>
</head>
<body>
<main>
<h1>Test Pop-Up</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit leo eu velit blandit posuere ac et sem. Nullam a turpis semper, finibus sapien vel, lobortis justo. Cras condimentum vel mi id accumsan. Nullam sed condimentum nisi. Duis non metus eros. Proin dignissim elit ut aliquet scelerisque. Pellentesque molestie gravida dolor, eu egestas nulla dapibus a. Sed vitae leo tellus. Donec convallis nulla non odio molestie, a gravida odio auctor. Aenean eu consectetur nunc.</p>
<div class="center"><button class="help-btn" onclick=javascript:popup()>Clicca per info</button></div>
</main>
</body>
</html>Il file css per la pagina iniziale
Possiamo dividere il nostro foglio di stile in tre parti tenendo conto delle diverse necessità. Una prima parte che si limita a gestire lo stile della nostra pagina iniziale e il bottone che scatena la tendina. Interessante per i lettore notare la tecnica con cui centrare l’intero paragrafo iniziale e il bottone. Quando si centrano oggetti è fondamentale indicare dimensioni dei contenitori, mentre nel caso di testo basta l’allineamento. Per il bottone interessante il bordo smussato col radius e l’effetto transizione.
body{background-color:#f3f3f3;}
main
{
width:70%;
margin-left:auto;
margin-right:auto;
background-color: white;
padding: 16px 32px 16px 32px;
}
.center{text-align: center;}
.help-btn
{
padding: 16px 32px 16px 32px;
font-family: arial,verdana, sans-serif;
font-weight: bold;
text-decoration: none;
border: 2px solid #2E7D32;
border-radius: 30px;
color: #2E7D42;
transition: 0.25s ease-in-out;
}
.help-btn:hover {
border: 2px solid #666;
color: #666;
}La funzione popup
In realtà il lettore attento ha già intuito il trucco. Non c’è nessun popup! O meglio non c’è una finestrella come quelle standard degli alert. Qui si tratta di creare dinamicamente un frammento di codice HTML, proiettarlo “davanti” alla nostra pagina iniziale chiamante, bloccare la pagina sotto magari con una sorta di ombreggiatura che focalizza l’attenzione dell’utente sulla porzione nuova, quindi creare la grafica con codice e stili a piacere avendo cura di inserire un bottone o simile per simulare la chiusura e ripristinare la pagina sottostante. Ecco perché il codice della funzione popup non ha nulla di nuovo o straordinario per chi si cimenta da un po’ con js e jquery. In realtà si può vedere come le funzioni jquery utilizzate non sono così avanzate e possono essere realizzate con qualche riga di codice in più in js puro. Ancora una volta, la soluzione proposta non è unica, esistono molte varianti non per questo migliori o peggiori rispetto al risultato atteso.
function popup()
{
//il codice html per il rendering all'interno del popup
var html = "<div class='sfondo'></div>"
+" <div class='corpo'>"
+" <div class='contenuto'></div>"
+" <p class='chiudi'>CHIUDI</p>"
+" </div>";
//il testo da viusalizzare
var testo= "In mattis a massa iaculis finibus. Fusce quis tempor purus. Proin a fermentum libero. Nulla blandit a ante id mollis. In dictum posuere augue at vulputate. Maecenas vulputate interdum metus id fermentum."
+ "Sed placerat libero nec sapien pretium, et lacinia leo eleifend. Vivamus lacinia viverra dui, sit amet faucibus odio posuere suscipit.";
$("body").prepend(html);
$(".sfondo, .chiudi").click(function() {popup_close();});
$(".contenuto").text(testo);
}La variabile html contiene la struttura grafica del popup. In questo caso è vero che stiamo creando una pagina html ex novo, ma è inutile creare la struttura classica con i tag html, head, title, body ecc perchè non sarà una vera pagina sull’ennesimo tab del browser. Potete usare tutti i tag, div, tag semantici che desiderate da personalizzare con i fogli di stile già caricati dalla pagina sottostante. La variabile testo banalmente contiene un testo da mostrare. L’idea semplice è quella di appendere al body la nostra struttura ex novo con prepend, aggiungere il testo con text e aggiungere un evento per rimuovere il nostro popup con il classico click o sul finto bottone o sullo sfondo (si poteva usare anche la funzione on() e off() associate al body della pagina sottostante per i puristi delle performance).
La funzione popup_close()
Funzione molto semplice ed intuitiva:
function popup_close()
{
$(".sfondo, .corpo").remove();
}Il CSS del popup
Il secondo pezzo di CSS riguarda finalmente la nostra finestra popup. Qui per comodità e brevità abbiamo mischiato in un solo file codice di diverse funzionalità. Va da se che in siti molto grandi, le diverse parti di un sito possono essere gestite con diversi fogli di stile, magari uno dedicato alla finestre popup, uno alla funzionalità x piuttosto che y, in modo da rendere anche più semplice la manutenzione ed aggiornamento del codice.
.sfondo {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0,0,0,0.5);
}
.corpo {
position: fixed;
z-index: 9999;
top: 50%;
left: 50%;
width: 50%;
height: 20%;
background-color: #f7f7f7;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 18px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,1);
}
.chiudi {
position: absolute;
z-index: 9999;
top: 55%;
right: 45%;
padding: 10px 15px;
font-family: Impact, Charcoal, sans-serif;
font-size: 20px;
font-weight: 100;
line-height: 25px;
color: #f7f7f7;
background: red;
cursor: pointer;
}
.contenuto {
clear: both;
padding: 2.5rem;
font-family: Impact, Charcoal, sans-serif;
text-align: center;
font-size: 18px;
}Come si vede, ogni elemento ha uno z-index che sovrappone gli oggetti tra loro con tanto di posizione e dimensione (obbligatorio inserirla!). Gli attributi più interessanti sono il trasnform translate che shifta, sposta la finestra. Non essendo perfettamente compatibile con tutti i browser, ci sono più varianti che è inutile imparare a memoria. Interessante è il box-shadow che prende oltre ai tre valori rgb, anche un quarto valore che è l’opacità del canale alpha, per noi l’ombra. Il resto dei selettori sono intuitivi e standard.
Come esercizio, il lettore può provare a personalizzare ed arricchire il popup con stili css oppure ad inserire una X in alto a destra per chiudere invece del bottone rosso; stampare dinamicamente il js come output di uno script php; aggiungere una funzione ajax per inserire una form e il salvataggio dei suoi dati in backend con un db.
Ultima modifica 19 Febbraio 2023