Realizzare un banner popup in jquery visualizzato una volta a sessione

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>

2 risposte a “Realizzare un banner popup in jquery visualizzato una volta a sessione”

Rispondi