Finestra modale in HTML e CSS con diversi contenuti

In questo articolo vediamo come creare una finestra modale in puro CSS, senza usare java script. Dato che linguaggio CSS 3 ci offre tattismi opportunità basta saper sfruttarli.
Il nostro compito sara creare una finestra modale che funzioni in qualsisi browser e nello stesso tempo limitare il peso del codice che in seguito posiamo usare anche al interno di varie CMS tipo joomla o wordpres. Bastera semplicemente ricopiare il codice e creare un modulo in joomla o un widget in wp per creare nostra finestra.

Ok a questo punto vediamo subito come appariràno le nostre finestra modale perche ne creeremo 3 di finestre.

Clicca bottone sotto.

 

    

Durante la creazione della carcassa della nostra finestra modale dovremo prima capire di che cosa avremo bisogno. Prima di tutto creeremo una scatola principale attraverso il tag div e avremo <div class="modal">  che nella sua volta sara diviso in tre blocchi, proprio la nostra finestra modale
<div class="modal-dialog">  con il titolo <div class="modal-header">  con il bloco centrale <div class="modal-body">  econ la parte sotto cosi detto footer  <div class="modal-footer">

A questo punto siamo pronti per realizzare markup html

 

Useremo sia elementi standart di  HTML come <input> e <label>, per determinare lo stato e proprietà degli oggetti useremo anche anche un eleemnto di  HTML5 che si chiama aria-hidden , che mostra lo stato "hidden" (nascosto) del elemento corrente e nel nostro per elemnti    <input> e <label>, che definiscono gli elementi nella finestra modale.
 Attributo for  serve per specificare con quale elemento dobiamo stabilire contatto, e quindi  su una singola pagina posiamo avere piu di una finestra modale con contenuti diversi, importante solo di ricordarsi  che l'id deve essere diverso da finestra a finestra, for="modal-1", for="modal-2"  
Quindi vediamo di creare il nostro pulsante di attivazione della finestra con la rispativa finestra

<!-- Buttone di attivazione -->
<label class="btn" for="modal-1">Aprire</label>
<!-- finestra modale  -->
<div class="modal">
  <input class="modal-open" id="modal-1" type="checkbox" hidden>
  <div class="modal-wrap" aria-hidden="true" role="dialog">
    <label class="modal-overlay" for="modal-1"></label>
    <div class="modal-dialog">
      <div class="modal-header">
        <h2>Titolo </h2>
        <label class="btn-close" for="modal-1" aria-hidden="true">×</label>
      </div>
      <div class="modal-body">
        <p>Il tuo contenuto, puo essere qualsiasi...</p>
      </div>
      <div class="modal-footer">
        <label class="btn btn-primary" for="modal-1">Ottimo!</label>
      </div>
    </div>
  </div>
</div>

Passiamo ai stili CSS

Lo stile della finestra modale assomiglia ai stili delle finestre pop-up del set di elementi Bootstrap, se necessario, potresti sempre cambiare a tuo piacimento le proprieta CSS. Direttamente nel codice css ho inserito dei commenti per facilitare la sua modifica  .

/* Stili della finestra modale */
.modal-header h2 {
    color: #555;  
    font-size: 20px;
    font-weight: normal;
    line-height: 1;    
    margin: 0;
}
/* bottone della chiusura  */
.modal .btn-close {
    color: #aaa;
    cursor: pointer;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
}
.modal .btn-close:hover {
    color: red;
}
/* sfondo oscurante */
.modal-wrap:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, .3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
}
.modal-overlay {
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 102;
}
/* ativazione dello sfondo oscurante e della finestra modale */
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
    display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
/* elementi della finestra */
.modal-dialog {
    background: #fefefe;
    border: none;
    border-radius: 5px;
    position: fixed;
    width: 80%;
    max-width: 500px;
    left: 50%;
    top: -100%;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    z-index: 103;
}
.modal-body {
  padding: 20px;
}
.modal-body p {
    margin: 0;
}
.modal-header,
.modal-footer {
    padding: 20px 20px;
}
.modal-header {
    border-bottom: #eaeaea solid 1px;
}
.modal-header h2 {
    font-size: 20px;
    margin: 0;
}
.modal-footer {
    border-top: #eaeaea solid 1px;
    text-align: right;
}
/* immagini adattivenella finestra  */
.modal-body img { 
    max-width: 100%;
    height: auto;
}
/* bottoni*/
.btn {
    background: #fff;
    border: #555 solid 1px;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
}
.btn:hover, .btn:focus {
    background: #f2f2f2;
}
.btn-primary {
    background: #428bca;
    border-color: #357ebd;
    color: #fff;
}
.btn-primary:hover{
    background: #66A1D3;
}

Se non hai bisogno di alcune parti, ad esempio, non hai bisogno del titolo, basta escludere <div class = "modal-header"> dal codice, non hai bisogno del footer , rimuovere <div class = "modal-footer">. Tutto ciò è chiaramente visibile nell'esempio  con la forma di sottoscrizione  nella finestra .

Forma di iscrizione nella finestra modale

Per questo esempio o usato una semplice forma, tutti gli elementi si adattano perfettamente alla grandezza della finestra , vediamo il codice della forma

/* Elementi della forma di contatto  */
.textbox{
    height:45px;
    width:100%;
    border-radius:3px;
    border:rgba(0,0,0,.3) 1px solid;
    box-sizing:border-box;
    font-size:14px; 
    padding:8px;
    margin-bottom:20px;  
}
.message:focus,
.textbox:focus{
    outline:none;
    border:rgba(24,149,215,1) 1px solid;
    color:rgba(24,149,215,1);
}
.message{
        background: rgba(255, 255, 255, 0.4); 
    width:100%;
    height: 120px;
    border:rgba(0,0,0,.3) 1px solid;
    box-sizing:border-box;
    -moz-border-radius: 3px;
    font-size:14px;
    -webkit-border-radius: 3px;
    border-radius: 3px; 
    display:block;
    padding:10px;
    margin-bottom:20px;
    overflow:hidden;
}
/* bottone “inviare” della forma  */
.btn-form{
    width:100%;
    height:45px;  
    border:rgba(0,0,0,.2) 1px solid;
    box-sizing:border-box;
    background: #dedede;
    color:#555;
    transition:background .4s;
}
/* Modifica dello sfondo del bottone al passaggio del mouse */
.btn-form:hover{
    background: #f2f2f2;
)

Markup html della forma

<div class="modal-body">
          <form>
             <input name="name" placeholder="* Inserire il vostro nome" class="textbox" required />
             <input name="emailaddress" placeholder="* Inserire e-mail" class="textbox" type="email" required />
             <textarea rows="4" cols="50" name="subject" placeholder="*Inserire messagio:" class="message" required></textarea>
              <input name="submit" class="btn btn-form" type="submit" value="Inviare" />
          </form>
      </div>

 Immagine nella finestra modale

Molti, moltissimi, usano finestre modali per mostrare vari immagini, quindi vediamo di realizzare anche questa opzione. Vediamo di specificare la grandezza delle immagini al inetrno della finestra indicando  il width=100% per la  larghezza rispetto la larghezza massima dello contenitore e height=auto, per l' altezza che sara determinata in automatico, cosi indipendentemente dalla largezza della nostra finestra la immagine sara sempre visualizzata correttamente

Lightbox

Per ottenere l'effetto lightbox, quando l'immagine riempie tutto lo spazio nella finestra  pop-up, basta rimuovere div con il titolo, blocco del foooter  e impostare margini dal bordo quelli che vuoi nel selettore .modal-body.

Video nella finestra modale

Se voresti inserire in una finestra modale  un video da  youtube o un  video da qualche altra fonte , legi questo articolo.
Pero devi sapere che con aiuto di CSS e HMTL e senza  java script il tuo video non si fermerà anche se chiudi la finestra modale.

Questo è tutto! Resta solo di ricordare che questo metodo funziona bene solo nei browser moderni, che suportano i  CSS3  . Pero a mio parere, persone che non aggiornano i propri browser non usano il suo computer in pieno e posiamo anche non badare a loro.

Letto 484 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso