Box centrato con sfondo opaco coi CSS3 ed un pizzico di J...

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Quanti pesanti e complicati plug-in avete cercato per aprire un box centrato in una pagina Web a cui desiderare applicare uno sfondo opaco? Io credo parecchi e comunque, senza nulla togliere ad alcun plug-in, la mia filosofia non cambia: impariamo a fare da noi quel che ci serve, in modo da avere sempre sotto controllo ogni aspetto delle nostre applicazioni Web.

In questo articolo vi spiego come creare un box modale centrato con sfondo opaco (o che dir si voglia sfondo trasparente) utilizzando i CSS3 e, come ho spiegato nel titolo, un pizzico di J... J cosa? Vedremo come utilizzare sia Javascript che jQuery per aprirlo e per chiuderlo.

Prima di passare alla spiegazione, preciso per chi non lo sapesse che una finestra modale rimane sempre in primo piano finchè non viene chiusa e nonostante lo scroll di pagina.

Vediamo dunque il risultato finale di quanto in oggetto:

box centrato con sfondo opaco coi css3

Iniziamo dal codice HTML della pagina:

<!DOCTYPE html>
<html lang="it">
<head>
<title>Box centrato e sfondo opaco coi CSS3 ed un pizzico di Javascript...</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>

<div id="ovl-opaque"></div>
<div id="ovl-box">
Contenuto del box centrato in cui possiamo metterci quel che ci pare: immagini, video, iframe o quel che sia!<br/>
<a href="javascript:box_centrato('chiudi')">Chiudi il box</a>
</div>

<h1>Box centrato e sfondo opaco coi CSS3 ed un pizzico di J...</h1>
<p><a href="javascript:box_centrato('apri')">Apri il box</a></p>
<!-- Contenuto della pagina... -->

</body>
</html>

Dichiariamo le intestazioni della pagina, includiamo un file CSS ed un file Javascript (i cui contenuti scopriremo a breve), quindi nel corpo della pagina impostiamo un primo div vuoto che rappresenta lo sfondo opaco, poi il div che gestisce il contenuto del box che apparirà in overlay, come spiegato in introduzione.

Al posto del commento "Contenuto della pagina..." ci sarà, appunto, il contenuto della vostra pagina. Per gustare a pieno il risultato dell'esempio suggerisco di impostare un contenuto testuale anche piuttosto lungo, come evidenziato nello screenshot mostrato in precedenza.

Come scritto nel codice di esempio stesso, all'interno del nostro box possiamo metterci qualsiasi cosa: testo, immagini, un video, un elemento pubblicitario, un widget, un iframe e così via.

Passiamo al codice CSS, contenuto nel file style.css, che divido in due blocchi. Il primo, di cui segue il codice, è una basilare stilizzazione degli elementi che suggerisco di includere nel vostro esempio per avere un effetto esteticamente più curato, se non gradevole:

html, body, h1, p, div { margin: 0; padding: 0; border: 0; }
body { background: #FFF; margin: 10px; }
h1, p, div { color: #000; font: normal 13px verdana; line-height: 20px; }
h1, p { margin-bottom: 10px; }
h1 { font-weight: bold; }
a { color: #0000FF; text-decoration: none; }
a:hover { color: #FF0000; }

Le spiegazioni di questa porzione di codice sono inutili, passiamo quindi oltre e concentriamoci sul codice CSS atto a stilizzare i due div per la gestione dello sfondo opaco e del box centrato:

#ovl-opaque, #ovl-box
{
    visibility: hidden;
    position: fixed;
    z-index: 100;
}
#ovl-opaque
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);
}
#ovl-box
{
    top: 50%;
    left: 50%;
    background: #FFF;
    width: 480px;
    height: 280px;
    padding: 10px;
    margin: -150px 0 0 -250px;
    border-radius: 10px;
    -o-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Si tratta di tre porzioni di stilizzazione. Nella prima impostiamo la visibilità nascosta, il posizionamento fisso e la la sovrapposizione di entrambi gli elementi. Il secondo blocco di codice stilizza lo sfondo opaco della pagina, mentre il terzo, su cui ci soffermeremo a breve per un po' di calcoli matematici, stilizza il box vero e proprio.

Dunque, passiamo ai calcoli matematici di cui sopra. Onde centrare il box è necessario stabilire innanzitutto la larghezza e l'altezza dello stesso, considerando che il padding va aggiunto.

Per cui, valutando i seguenti dati:

  • Larghezza: 480
  • Altezza: 280
  • Padding superiore: 10
  • Padding inferiore: 10
  • Padding sinistro: 10
  • Padding destro: 10

possiamo stabilire che il box è largo 500 pixel (480 + 10 + 10) ed alto 300 pixel (280 + 10 + 10). Per centrare il box è quindi necessario innanzitutto impostare al 50% i valori top e left, quindi impostare un margine superiore e sinistro della metà, rispettivamente, dei valori di altezza e larghezza (nel nostro caso, quindi, 250 e 150 sono la metà di 500 e 300, ossia larghezza ed altezza complessivi del box, sommato il padding).

A questo punto, se eseguiamo nel nostro browser preferito l'esempio, fatto di codice HTML e di quello CSS, non succede nulla, poichà abbiamo nascosto gli elementi e, per aprirlo, dobbiamo avvalerci di Javascrit. Possiamo infatti notare che al link "Apri il box" è associata la funzione Javascript box_centrato() a cui passiamo il parametro "apri".

Vediamo quindi il codice Javascript contenuto nel file script.js:

window.onkeydown = function(x)
{
    var e = x || window.event
    if (e.keyCode == 27)
    {
        box_centrato("chiudi");
    }
}
function box_centrato(azione)
{
    switch (azione)
    {
        case "apri" :
            document.getElementById("ovl-opaque").style.visibility = "visible";
            document.getElementById("ovl-box").style.visibility = "visible";
        break;
        case "chiudi" :
            document.getElementById("ovl-opaque").style.visibility = "hidden";
            document.getElementById("ovl-box").style.visibility = "hidden";
        break;
    }
}

Saltiamo un attimo il codice relativo all'evento "keydown" e passiamo alla funzione box_centrato: a seconda che il parametro sia "apri" o "chiudi" (associato infatti nel link presente all'interno del box), andiamo a nascondere oppure a mostrare il box ed a gestire lo sfondo opaco.

La gestione dell'evento "keydown" non fa che richiamare la funzione box_centrato alla pressione del tasto ESC, consentendo quindi al navigatore di chiudere il box anche attraverso il noto tasto della tastiera, piuttosto che cliccando sul link di chiusura.

Come detto in introduzione, non ci resta che effettuare qualche opportuna modifica per gestire l'apertura e la chiusura del box con jQuery invece che col Javascript tradizionale.

Per prima cosa, effettuiamo una piccola e semplice modifica al codice HTML, semplicemente aggiungendo il richiamo a jQuery:

<!DOCTYPE html>
<html lang="it">
<head>
<title>Box centrato e sfondo opaco coi CSS3 ed un pizzico di jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>

<!-- Etc... -->

In secondo luogo, dal codice CSS andiamo ad eliminare il comando che nasconde i due box. Per cui:

#ovl-opaque, #ovl-box
{
    visibility: hidden;
    position: fixed;
    z-index: 100;
}

diventerà:

#ovl-opaque, #ovl-box
{
    position: fixed;
    z-index: 100;
}

Il grosso del lavoro per "tradurre" l'esempio da Javascript a jQuery è rappresentato dalle modifiche che andiamo ad apportare al file script.js, di cui segue il codice opportunamente modificato per l'integrazione col noto framework:

$(document).ready(function()
{
    $("#ovl-opaque").hide();
    $("#ovl-box").hide();
    $("body").on("keydown", function(e)
    {
        if (e.keyCode == 27)
        {
            box_centrato("chiudi");
        }
    });
});
function box_centrato(azione)
{
    switch (azione)
    {
        case "apri" :
            $("#ovl-opaque").fadeIn(1000);
            $("#ovl-box").fadeIn(2000);
        break;
        case "chiudi" :
            $("#ovl-opaque").fadeOut(2000);
            $("#ovl-box").fadeOut(1000);
        break;
    }
}

La filosofia è esattamente la stessa dell'esempio JS tradizionale, con al differenza che la finestra si aprirà e si chiuderà con effetto fade.

Nello specifico, in fase di aperture lo sfondo opaco apparirà in un secondo ed il box centrato in due secondi. Viceversa, in chiusura l'overlay scomparirà in un secondo e lo sfondo trasparente in due secondi.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (46.306)

:: Referenze dei fogli di stile Css (41.553)

:: Menu ad effetto mouseover con i Css (38.747)

:: Effetti sui link con i Css (28.771)

:: Testo verticale coi Css (19.611)

:: Angoli smussati in un box coi Css (18.695)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (15.970)

:: Box con effetto ombra con i CSS3 (15.876)

:: Stilizzare i form Html con i Css (15.562)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.257)

IN EVIDENZA
DOWNLOAD