Come creare una finestra pop-up che appare qualche secondo dopo l'apertura della pagina web.

Hai mai visto una finestra pop-up che appare qualche secondo dopo che apri un sito? In questa finestra ti propongono di iscriversi al sito o ti offrono qualche prodotto. Se si, allora in questa lezione vediamo come realizzarla nel nostro sito. Vorrei subito far notare che non a tutti piacciono questi finestre, quindi  ti consiglio di utilizzarla in caso che veramente ottieni dei benefici dalla sua  esistenza.

 

La nostra finestra pop-up sara realizzata in base di CSS3 e un piccolo javascript.

Ho preparato anche un esempio che appare 5 secondi dopo che la pagina sara completamente caricata.

Finestra pop-up che appare qualche secondo in ritardo rispetto il caricamento della pagina

La finestra si aprira dopo 5 secondi che la pagina sara completamente caricata sul browser del utente.

Scoprire di piu

creato da : ioeweb.it

1.Markup html della finestra modale o pop-up  

Marcatura della nostra finestra pop-up è molto semplice. Avremo bisogno solo due elementi  div con identificatori id diversi per collegarli ad javascript e per gestione  del aspetto della nostra finestra pop-up che faremo atraverso gli stili CSS. Elemento <div id = "overlay"> è responsabile per il posizionamento, colore di sfondo, la trasparenza e il  grado di oscuramento del resto della pagina durante aparizione della finestra  pop-up. All'interno del contenitore <div class = "popup"> inseriremo contenuto della nostra finestra modale. Abbiamo anche bisogno di creare un link per chiudere la finestra. Per il nostro esempio visivo vediamo di inserire come contenuto un  semplice  testo rachiuso in  un paio di paragrafi. Vediamo per primo l markup della nostra finestra modale

<!-- finestra modale  -->
<div id="overlay">
<div class="popup">
<h2>Finestra modale!</h2>
<p>La largezza della finestar e impostata in precentuale rispetto del conetnitore genitore, e nel nostro esempio è lo sfondo che oscura la pagina del sito.</p>
<div class="pl-left">
<img src="/la vostra immagine ">
</div>
<p>E previsto utilizzo di miniature incorporati, che posiamo inserire sia sulla destar sia sulla sinistra, e  sono piazzati in un div con le classi  .pl-left e .pl-right rispetivamente.</p>
<div class="pl-right">
<img src="/indirizzo della vostra immagine ">
</div>              
<p>La grandezza del blocco con miniature e sempre fissata in percentuale (25%), mantenendo in tal modo le proporzioni con cambio della grandezza dello schermo del dispositivo usato dal visitatore.</p>
<p>Una semplice animazione di apparizione è realizzata atraverso cambiamento della proprieta di trasparenza (opacity) da 0 a 1</p>
<button class="close" title="Chiudere" onclick="document.getElementById('overlay').style.display='none';"></button>
</div>
</div>

Per creare ritardo nella apparizione della  finestra modale useremo un piccolo Javascript e già in esso si possa regolare il ritardo in mille secondi. Tutti i browser doverebbero  reagire in maniera uguale e non bloccare lo script e quindi mostrare la nostra a finestra pop-up. E sempre meglio inserire questo Javascript in fondo della pagina prima della chiusura del tag </body>.  Lo script è costituito da  poche righe:

<script type="text/javascript">
        var delay_popup = 5000;
        setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
</script>

Nell'esempio, il tempo di ritardo di  visualizzazione della finestra è impostato in 5000 millisecondi il che corrisponde a circa 5 secondi, potrai assegnare qualsiasi altro valore.

Per chiudere la finestra, usiamo semplicemente un bottone standard creato con il tag <button> con l'evento onclick e la classe class = "close", per poter decorare e posizionare il nostro bottone attraverso stili CSS.

<button class="close" title="Chiudere" onclick="document.getElementById('overlay').style.display='none';"></button>

Così siamo arrivati al punto più interessante (a mio parere),  formare gli stili css della nostra  finestra pop-up.

2.Stili CSS della finestra po-up

Per iniziare, creeremo un identificatore #overlay attraverso quale collegeremo la nostra finestra con javascript e formeremo il contenitore di base <div id = "overlay"> della  finestra pop-up.

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
}

Come  posizione della nostar finestra pop-up vedimo di inserire una posizione fissa  position: fixed;  vale a dire, se si scorre la pagina quando la finestra è aperta, essa rimane al suo posto sempre in vista. Impostiamo il colore nero per lo sfondo e aggiungeremo allo sfondo un leggera trasparenza  che ricopra tutto lo schermo. Usando la proprietà  z-index, nostro oscuramento sara posizionato sopra tutti gli altri elementi della pagina.

Alla fine, mediante la proprietà display: none;, nascondimo la finestra  fino alla sua attivazione da JavaScript.

Ora, pasiamo direttamente alla finestra modale con il contenuto. Qui tutto è molto semplice. Creare un ID  #popup e  gia per questo seletore di id prescrivere dei stili CSS. Specificare la larghezza della finestra modale e la sua posizione sulla pagina. Impostiamo il colore di sfondo, lo stile e il colore del bordo, aggiungere un effetto ombra e leggermente arrotondare gli angoli del nostro blocco con contenuto.

.popup {
    top: 25%;
    left: 0;
    right: 0;       
    font-size: 14px;
    margin: auto;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 1px solid #383838;
    background: #fefefe;
    z-index: 1000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    -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);
    -ms-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-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
}

Utilizzando le proprietà CSS3 possiamo ragiungere un aspetto finale che ti piace, puoi utilizzare un gradiente lineare per lo sfondo o diversi tipi di trasformazioni.

3.Chiusura della finestra po-up

Nella fase finale, è necessario realizzare la possibilità di chiudere la finestra e creare l'aspetto del pulsante di chiusura. Per fare questo, creare una classe close e disegnamo il pulsante di chiusura:

.close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    position: absolute;
    border: none;  
    border-radius: 50%;
    background-color: rgba(0, 131, 119, 0.9);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    outline: none;
 
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    transition: all 0.5s;
}
/* cambio del clore del bottone di chiusura al passagio del mose */
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
}

Per il bottone di chiusura  impostiamo il colore di sfondo e il grado di trasparenza. Abbiamo precisato la posizione, la dimensione e la grandezza del testo, abbiamo aggiunto un piccolo effetto di ombra per il testo. Quindi definire la posizione del bottone, la larghezza e il colore del bordo, e con l'aiuto della proprietà di arrotondamento, rendere il nostro pulsante rotondo, e aggiungere una leggera ombra . Alla fine impostiamo cambiamento dello sfondo al passaggio del mouse con pseudo-classe:hover.

3.Come gestire apparenza della finestra pop-up per i vari tipi di visitatori

E dopo aver realizzato una finestra del genere sarebbe opportuno di capire come gestirla in senso dei cookie . Per mostrarla solo una volta al visitatore che la gia vista nel arco di 7 giorni per esempio. Le opzioni sono molte e diverse. Per essere breve,  spiego come farlo con un metodo piu diffuso, utilizzando la libreria jQuery e jquery.cookie.js plugin.
Tutto ciò che serve è quello di collegare la libreria jQuery e il plugin sopra citato jquery.cookie.js al vostro sito o singola pagina html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
.
La libreria jQuery prendiamo da CDN  di Google e plugin per Cookie può essere scaricato dal sito di Plugin per jQuery ed inserirlo sul tuo sito web nella cartella “js”(per esempio).
Dopo di che , collegarlo alla pagina , o includere il codice dello script nel codice HTML usando il tag <script>, come qui :
<script type="text/javascript">    
$(function() {
  // Verifichiamo se l'utente ha gia visitato il nostro sito 
  // Se si non si fa niente 
     if (!$.cookie('hideModal')) {
  // se no ci sono  cookie  del nostro sito, allora mostriamo la finestra 
  // con ritardo di 5 sec
        var delay_popup = 5000;
        setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
     }
     $.cookie('hideModal', true, {
   // Periodo di memorizzazione di cookie in giorni
        expires: 7,
        path: '/'
   });
});
</script>

 

Java script che utilizzeremo e meglio inserire in fondo della pagina sempre prima della chiusura del tag  </ body>. In questo esempio, ho mostrato la possibilità di memorizzazione dei cookie dopo la chiusura della finestra pop-up per sette giorni, il che significa che la finestra verrà visualizzata all'utente alla prima visita, una sola volta. Nel corso dei prossimi sette giorni, o fino a quando l'utente non ripulisce i cookies del proprio browser .
Come si può capire, il gestore di  cookie , è possibile collegare a qualsiasi altro elemento. Tempo di conservazione vine impostato nella stringa expires: 7, (nell'esempio 7 giorni). Il ritardo della visualizzazione della finestra vine regolato dalla funzione setTimeout, per impostazione predefinita ho inserito 5000, vale a dire, che la finestra pop-up si aprira dopo 5 secondi dopo il caricamento totale della pagina.

Letto 2917 volte