Ecco un codice per realizzare un semplice banner a comparsa che si apra al caricamento di una pagina web, con un ciclo IF in php che consenta di visualizzarlo solo in alcuni giorni della settimana:

<?
 //mostra il banner popup solo venerdì, sabato e domenica (vedere la funzione date() di php per variarne la visualizzazione)
 if ((date('w') == 5) OR (date('w') == 6) OR (date('w') == 0))
 {
 ?>
 <script>
 jQuery(document).ready(function ($) {
 if (sessionStorage.getItem('avviso') !== 'true') {
 $('body').append('<div id="myavviso"><a href="http://www.simonezanella.it" target="_blank"><br /><img src="banner.jpg" alt="banner" style="border: none; width: 100%;" /></a><div class="myavviso-button">Chiudi la pubblicità X</div></div>');
 sessionStorage.setItem('avviso', 'true');
 }
 $('#myavviso .myavviso-button').on('click', function () {
 $('#myavviso').hide();
 });
 $('#reset-session').on('click', function () {
 sessionStorage.setItem('avviso', '');
 });
 });
 </script>
<?
 }
 ?>

Il codice consente di mostrare il banner una volta soltanto all’interno della stessa sessione di visita del sito, inoltre è presente una barra di chiusura del banner. L’interno del popup è impostato per contenere un’immagine cliccabile, ma può ovviamente essere sotituito con quanto si preferisce veicolare col banner. Vanno aggiunte al foglio di stile del sito le seguenti righe di codice CSS:

#myavviso {
 position: fixed;
 top: 30px;
 width: 98%;
 max-height: 790px;
 max-width: 1024px;
 margin: 20px auto;
 background-color: #333;
 padding: 5px;
 z-index: 99999;
 text-align: center;
 }
#myavviso .myavviso-button {
 width: 100%;
 height: 20px;
 position: absolute;
 padding-right: 5px;
 left: 0px;
 top: 1px;
 background-color: #666;
 color: #fff;
 border-radius: 5px;
 cursor: pointer;
 text-align: right;
 }

Variando i parametri nel codice CSS si può personalizzare dimensione, aspetto e posizione del banner a proprio piacimento.
Per il funzionamento del codice è necessario inserire le librerie jquery nel proprio progetto, ad esempio:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Pubblicato da Simone Zanella

Ing. Informatico (sempre), Prof. di Mate-Informatica-Elettronica (quando capita), sciatore (in inverno), Sampdoriano (quanto basta).

Unisciti alla discussione

2 commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza cookie tecnici per il suo funzionamento. Cliccando su Accetta, scorrendo la pagina, navigando questo sito ne acconsenti l'uso e la tua scelta sarà memorizzata per 12 mesi. I contenuti presenti rappresentano l'opinione personale dell'autore, le guide e gli appunti sono da considerarsi indicativi e si declina ogni responsabilità derivante dall'applicazione delle indicazioni contenuti in essi. Maggiori informazioni sulla privacy e sui cookie (informativa estesa)

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi