Popup-under pubblicitario in stile Html.it

Nell’era del web 1.0 spopolavano gli odiosi popup a finestra con messaggi pubblicitari, che dato il sistema di Internet Explorer (all’epoca unico leader nel settore browser) intasava la barra delle applicazioni.

Il web 2.0 ha evoluto il sistema popup, ora chiamati anche popup-under, con una tecnica meno invasiva, ma altrettanto fastidiosa, che si basa su un div con posizionamento assoluto sopra il layout, così il browser non bloccherà il popup perchè non lo vede come finestra, ma come un elemento html.

Un’esempio eclatante è usato da Html.it che per la pubblicità più in evidenza usa questa tecnica.

Che codice si usa ?

Installare un popup-under è molto semplice, basta qualche riga di Css e una riga di javascript. In pratica basta click in punto qualsiasi sul popup per chiuderlo, e se questo conterrà banner, aprirà ovviamente anche un’altra pagina.

Il codice Html e javascript:

<div id="absolute" onclick="this.style.display='none'">
<div  id="popup" onclick="this.style.display='none'"><h2 style="color:#FFFFFF">popup</h2></div>
</div>

Il codice Css:

#absolute {width:100%; height:100%; text-align:center; position:absolute; }
#popup {width:400px; height:400px; background-color:#000000; border:2px solid #999999; text-align: center; margin:0 auto; }

Ovviamente questo è solo un esempio, e il codice può essere modificato a proprio piacimento.

Soluzioni più avanzate

Una soluzione basata su Ajax e di sicuro più elegante, è quella proposta da GreyBox, che con pochi passi permette di realizzare popup-under contenenti altre pagine web tramite iframe.
http://orangoo.com/labs/GreyBox/