Creare finestre popup in puro CSS. 5 tipi di contenuto in una finestra a comparsa.

Oggi vediamo come creare in puro HTML e CSS senza javascript o altro aiuto le finestre a comparsa o finestre popup.

Il nostro compito durante questo tutorial sara  in primo luogo di raggiungere la corretta visualizzazione delle finestre in varie browser,  più o meno stabile risultato finale  e naturalmente, con perdite minimisate ridurre la quantità totale del codice  HTML e  CSS al fine di facilitare la nostra vita come webmaster.

Vedremo finestre modali  con 5 tipi di contenuto piu diffuso che si possa inserire in un progetto web. Quindi dopo la lezione potrai semplicemente ricopiare markup html e gli stili CSS nel tuo progetto e la cosa è fatta!

Esempi di finestre popup in HTML e CSS con contenuti diversi

Ma prima di proseguire  vediamo nel vivo questi 5 finestre popup o come li chiamano con un altro nome finestre a comparsa .  

www.ioeweb.itESEMPI di finestre popup creati in puro CSS3, senza JavaScript e ulteriori immagini


Premi qualsiasi bottone


Cliccare immagine

Immagini realistici

Bene, ora andiamo a vedere come è stato scritto il codice html e gli stili css della nostra finestra modale.

Fase 1. Markup HTML di finestra popup

In primo luogo, creiamo con aiuto del linguggio HTML markup di base. Come si può vedere nel esempio sotto , il codice di base è abbastanza semplice, se si considera  markup html delle finestre modali e di  bottoni (link) per aprirle. Ogni finestra popup non è altro che un contenitore creato con aiuto del tag  <div>, con un contenuto specifico all'interno e un bottone  "Chiudi" stilizzati unicamente mediante linguaggio css.
Sintassi

<!-- blocco con bottoni per aprire finestre popup-->
 <a href="#win1" class="button button-green">Aprire finestra 1</a>
 <a href="#win2" class="button button-red"> Aprire finestra 2</a>
 <a href="#win3" class="button button-blue">Video nella finestra  3</a>
 <a href="#win4" class="button button-orange">Foto nella finestra 4</a>
<!-- Richimo della finestra attraverso la immagine in miniatura -->
<a href="#win5"><img title="" src="/realism_lrg.jpg" width="150" height="150" alt="" /></a>
<!-- Finestra modale  №1 -->
   <a href="#x" class="overlay" id="win1"></a>
   <div class="popup">
     Qui potrai inserire qualsiasi contenuto, immagini o video! 
    <a class="close"title="Chiudere" href="#close"></a>
    </div>
<!-- Finestra modale №2 -->
    <a href="#x" class="overlay" id="win2"></a>
    <div class="popup">
     Qui potrai inserire qualsiasi contenuto immagini o video! 
    <a class="close" title="Chiudere" href="#close"></a>
    </div>
<!-- Finestra modale№3 -->
        <a href="#x" class="overlay" id="win3"></a>
        <div class="popup">
<h2>Titolo</h2>
      Qui potrai inserire il tuo video da qualsiasi risorsa esterna come YouTube, Vimeo e cosi via.(iframe, embed)...
        <a class="close" title="Chiudere" href="/page.html" onclick="return false"></a><!-- Chiudere video dopo la chiusura della finestra -->
        </div>
<!-- Finestra modale №4 -->
<a href="#x" class="overlay" id="win4"></a>
        <div class="popup">
<img class="is-image" src="/la tua immagine.jpg" alt="" />
        <a class="close" title="Chiudere" href="#close"></a>
        </div>
<!-- Finestra modale №5 -->
        <a href="#x" class="overlay" id="win5"></a>
        <div class="popup">
<img class="is-image" src="/la tua immagine.jpg" alt="" />
<a class="close" title="Chiudere" href="#close"></a>
        </div>

Nell'esempio del codice precedente, per chiarezza, ho aggiunto delle breve spiegazione . Ti rimane solo di inserire il proprio contenuto nel  contenitore <div> della finestra popup, come per esempio un  semplice testo, immagine, un video proprio o dalle risorse esterni come YouTube, Vimeo, ecc. Per aprire la nostra finestra dovremo creare un semplice link in forma del testo o creare dei meravigliosi bottoni con gradiente come nell'esempio.

Fase 2. Stili CSS delle finestre popup

Il passo successivo è il più interessante. E importante preparare tutti gli stili necessari per la nostra finestra a comparsa , disegnare l'aspetto e aggiungere  funzionalità (link per esempio). Stili di base li ho saltati per non ingombrare articolo, e per alcune delle regole, per chiarirle meglio ho aggiunto dei commenti. Vorrei anche far notare che nella realizzazione della finestra e il suo richiamo sono stati usati pseudo-classi :target. Diciamo che tutto il trucco sta proprio in questo pseudo-classe, che sostituisce evento clic di javascript . Quindi per capire meglio il funzionamento ti consiglio di leggere articolo relativo al utilizzo di questo  pseudo-classe :target

/* Stili di base per oscuramento della finestra   */
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
/* livello di oscuramento  */
    background-color: rgba(0, 0, 0, 0.65);
    position: fixed; /* posizionamento fisso */
    cursor: default; /* tipo del cursore */
}
/* attivare livello di oscuramento */
.overlay:target {
    display: block;
}
/* stili di finestre pop-up */
.popup {
    top: -100%;
    right: 0;
    left: 50%;
    font-size: 14px;
    z-index: 20;
    margin: 0;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
/* posizionamento fisso allo scorrimento della pagina  */
    position: fixed;
    padding: 15px;
    border: 1px solid #383838;
    background: #fefefe;
/* arrotondamento dei angoli  */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
/* ombra esetrna */
        box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
       transform: translate(-50%, -500%);
    transition: transform 0.6s ease-out;
}
/* attivare finestra modale, viene utilizato pseudo-classe:target*/
.overlay:target+.popup {
    transform: translate(-50%, 0);
    top: 20%;
}
/* formare il bottone di chiusura  */
.close {
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 0;
    border: 2px solid #ccc;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.8);
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font: 13px/20px 'Tahoma', Arial, sans-serif;
    font-weight: bold;
    transition: all ease .8s;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 12px;
}
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
    transform: rotate(360deg);    
}
/* immagine al interno della afinestra */
.popup img {
    width: 100%;
    height: auto;
}
/* miniatura a destra/sinistra  */
.pic-left, 
.pic-right {
    width: 25%;
    height: auto;
}
.pic-left {
    float: left;
    margin: 5px 15px 5px 0;
}
.pic-right {
    float: right;
    margin: 5px 0 5px 15px;
}
/* elemento media, frame  */
.popup embed, 
.popup iframe {
    top: 0;
    right: 0;
    bottom: 0; 
    left: 0; 
    display:block;
    margin: auto;
    min-width: 320px;
    max-width: 600px;
    width: 100%;
}
.popup h2 { /* titolo 2 */
    margin: 0;
    color: #008000;
    padding: 5px 0px 10px;
    text-align: left;
    text-shadow: 1px 1px 3px #adadad;
    font-weight: 500;
    font-size: 1.4em;
    font-family: 'Tahoma', Arial, sans-serif;
    line-height: 1.3;
}
/* paragrafi*/
.popup p {margin: 0; padding: 5px 0}

Come puio vedere,  tutto è piuttosto semplice. Se tutto farai bene, correttamente, avrai nel tuo arsenale di elementi da inserire in un sito web una splendida finestra popup in cui potrai inserire  qualsiasi contenuto. Sperimentando con le impostazioni, modificando gli stili della finestra potrai adattarla al disegno del tuo sito.

La pagina completa potrai scaricare qui sotto.

Letto 6811 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