Se a qualcuno fosse sfuggito mostriamo la tecnica usata per sostituire le finestre di popup che potrebbero essere bloccate da alcune impostazione di sicurezza del browser.

Premetto che tale funzionalità resta sgratita al navigatore esattamente come i popup e sarebbe meglio quindi evitarla. Le soluzioni gradite infatti sono sempre quelle che chiedono all’utente di fare qualcosa e fanno sì che sia lui a decidere (cliccando su “vedi pubblicità” o simili).

Detto questo passiamo al codice base per implementare il tutto: si tratta semplicemente di un contenitore (spotoverlay) che racchiude due div (uno per il pulsante Chiudi e uno per il contenuto)

<div id="spotoverlay">
  <div class="chiudi">
    <a href="#" onclick="document.getElementById('spotoverlay').style.visibility='hidden'">CHIUDI</a>
  </div>
  <div>
    Qui dentro va messo il messaggio (codice (x)html) da evidenziare...
  </div>
</div>

Il pulsante (link o foto dentro il tag <a>) è un “chiudi” falso… in quanto non c’è niente da chiudere: c’è solo un div da nascondere… e lo facciamo con quel codice javascript

onclick=" *** *** style.visibility='hidden'"

Nel codice sotto associamo un stile (css) ai riquadri e il gioco è fatto

#spotoverlay {
    position: absolute;
    background-color: #dfdfdf;
    font-size: 12px;
    font-family: arial;
    top: 150px;
    left: 150px;
    width: 200px;
    height: 200px;
    border: solid 1px #000;
}
div.chiudi {
    text-align: right;
    border-bottom: solid 1px #000;
}
a.spot {
    color: #000;
    text-decoration: none;
}

E’ tutto…
Qui possiamo vedere un esempio: all’inizio la pagina si apre col messaggio in evidenza; questo scompare se si clicca su Chiudi.

Tecniche più evolute, javascript e ora jquery, possono aggiungere effetti speciali a questa tecnica, come offuscare lo sfondo, entrare/uscire in dissolvenza, etc… magari in un prossimo post le vediamo…