Copia e incolla: un box per i messaggi completo in css, html e jQuery

Logo CSS - Cascading Style Sheets

Loading

In questo articolo fornirò il codice pronto per la realizzazione di un box html da far apparire e scomparire al centro della pagina per mandare un messaggio all’utente.
Il box è centrato con l’utilizzo dei css utlizzando la tecnica illustrata in questo articolo: Centrare un box con i css.
Nel codice che proporrò è anche compreso un div che copre tutto il contenuto della pagina, in modo che quando è visualizzato il box non è possibile cliccare sui link della pagina sottostante.
Inoltre nel codice è già inserto il link per fare scomparire il box, questa operazione sarà compiuta con un semplice codice jQuery

Gli elementi che utilizzeremo saranno dunque 3: hiddenBox, ossia il box da utilizzare per i messaggi, velo, ossia il div che coprirà la pagina e un tag a da utilizzare per la chiusura del box e del velo.

Ecco il codice css:

    #hiddenBox{
        z-index: 5;
        position: fixed;
        width: 388px;
        height: 238px;
        padding: 5px;
        background-color: white;
        top: 50%;
        left:50%;
        border: 1px solid gray;
        margin-left: -200px;
        margin-top: -125px;
    }
    
    #hiddenBox a.chiudi{
        display: block;
        margin: 0;
        width: 16px;
        height: 16px;
        position: absolute;
        background-color: red;
        top:5px;
        right: 5px;
        text-decoration: none;
    }
    
    #velo{
        z-index: 4;
        position: fixed;
        top: 0;
        left:0;
        width: 100%;
        height: 100%;
        opacity: 0.7;
        background-color: white;
    }
    .clear{
        clear: both;
    }

Nel codice sopra è presente anche la classe clear, che utlizzo per ripristinare il normale flusso dell’HTML dopo avre usato un elemento flottante.

Di seguito il codice html:

<div id="velo">
    <div id="hiddenBox">
         <a class="chiudi">&nbsp;</a>
         <div class="clear">&nbsp;</div>
    </div>
</div>

Per comodità ho inserito il div hiddenBox dentro velo, ma avrebbe funzionato anche se fossero stati separati (facendo una piccola modifica al codice jQuery).
Il codice jQuery per la chiusura del box velo e dell’hiddenBox è messo inline nel tag a contenuto in hiddenBox.

Basta fare copia e incolla del codice e collegare jQuery e tutto funziona.