Popup pubblicitario con conto alla rovescia

filomeni

Moderatore
Membro dello Staff
MOD
14 Mag 2006
1.054
6
38
53
Roseto degli Abruzzi (TE)
www.sitiweb.cloud
Convertire i click in acquisto è cosa complicata!
Con il trascorrere della mia esperienza e quindi "provato sulla pelle", un messaggio che sprona molto l'utente è "l'acquisto a tempo"...
Quante volte ci siamo trovati un messaggio:"Attenzione!!! questa promozione scade fra 3 ore 15 minuti 10 secondi"
Questa situazione mette curiosità e il tempo che scorre ci mette in condizione di pensare:"si dai lo compro altrimenti mi sfugge l'occasione!".
Bene allora oggi ho costruito un Popup con Countdown, all'apertura del vostro sito in "overlay" si apre il popup (che in realtà non è un popup ma un div con caratteristiche analoghe).
questo uno screenshot, nel fondo della pagina ho messo una txture del mio logo ma in realtà è per far capire la trasparenza e sarà la vostra pagina...
countdown.jpg
 

filomeni

Moderatore
Membro dello Staff
MOD
14 Mag 2006
1.054
6
38
53
Roseto degli Abruzzi (TE)
www.sitiweb.cloud
Popup pubblicitario con conto alla rovescia (continuazione)

Ovviamente, io in background ho inserito una texture del mio logo, per voi sarà l'home page o la pagina che deve contenere il messaggio pubblicitario.
La pagina è sviluppata con php, javascript, Jquery, css.
Il css è l'artefice della grafica quindi, colori, pulsanti, sfumature, dimensioni ecc... Il Jquery ci serve per dar "vita" al conto alla rovescia, questo è affiancato da javascript e css.
Il javascript oltre a servire per Jquery, ci servirà per "scrivere" un cookie temporaneo che alla chiusura del browser si distrugge automaticamente.
A proposito dei cookie, argomento molto discusso al momento, ho preparato uno snippet per la gestione avviso dei cookie se volete dare un occhio: http://forum.mrwebmaster.it/snippet/43611-barra-cookie-law.html
Il "pulsante" di chiusura del banner pubblicitario è formato da un "button" che alla sua pressione richiama la funzione Jquery:
Codice:
$(document).ready(function() {
			$("#close").click(
	 		function(){
	 		$(".content-popUp").fadeToggle(1000);			
			});
	});//FINE DOM
e nello stesso istante con javascript, va a scrivere il cookie:
Codice:
onclick="document.cookie='style=none;expires='";
PHP serve per la lettura del cookie memorizzato e se presente "nasconde" l'intero div contenete il banner bubblicitario.
PHP:
$style = $_COOKIE['style'];
il recupero del cookie è possibile anche in javascript ma personalmente mi trovo meglio facendo in questa maniera.
posto la pagina compilata per intero ma per semplicità ho preparato un file zip dove scaricare tuttotto...
scrica qui: http://www.filowebservice.com/download/PopUpCount.zip

ecco tutto:
Codice:
<html>
<head>
<?php
$style = $_COOKIE['style'];
?>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/countdown.js"></script>
<script>
	
		$(document).ready(function(){
			$("#countdown").countdown({
				date: "25 September 2015 00:00:00",//qui setta la data di countdown
				format: "on"
			},
			
			function() {
				
			});
		});
	
	</script>
	<script>//
	$(document).ready(function() {
			$("#close").click(
	 		function(){
	 		$(".content-popUp").fadeToggle(1000);//tempo di dissolvenza		
			});
	});
	</script>
</head>
<body>
<div class="content-popUp" style="display:<?php echo $style ?>"><!--Recuoero cookie per nascondere tutto-->
<div class="alert">
<a href="#"><button type="button" id="close" onclick="document.cookie='style=none;expires='">X</button></a>
<!-- TIMER -->
<div class="timer-area">
<h1>Manca poco alla scadenza</h1>
<h3>Una promozione IMPERDIBILE!!!</h3>
<h4>La tua promozione!!!</h4>
<ul id="countdown">
<li> <span class="days">00</span>
<p class="timeRefDays">Giorni</p>
</li>
<li> <span class="hours">00</span>
<p class="timeRefHours">ore</p>
</li>
<li> <span class="minutes">00</span>
<p class="timeRefMinutes">minuti</p>
</li>
<li> <span class="seconds">00</span>
<p class="timeRefSeconds">secondi</p>
</li>
</ul>
</div>
<!-- end TIMER --> 
<a href="http://www.dove-vuoi-tu.html" class="button">Vai!</a>
</div>
</div>
</body>
</html>
Se ho dimenticato qualcosa o notate degli errori fatemi sapere grazie.
 
Ultima modifica di un moderatore:
Discussioni simili
Autore Titolo Forum Risposte Data
L Posizione a un popup Javascript 0
L Chiusura automatica popup Javascript 0
C finestra popup dopo login PHP 2
bubino8 [Javascript] popup di controllo elimina dopo window.print(); Javascript 0
Y [Javascript] z-index popup accettazione cookie Javascript 1
L PopUp tramite PHP se la mail inserita è già registrata nel database PHP 3
riminese77 [ASP.Net] Popup Bootstrap in datagrid ASP.NET 0
L da php a popup java PHP 2
F [Javascript] chiusura popup e refresh pagina madre su punto preciso Javascript 0
L [ASP.Net] Realizzare modulo contatti PopUp ! ASP.NET 1
V [Javascript] Passaggio valore da popup a pagina madre Javascript 5
K [HTML] Thumbnail (mouseover) + Popup immagine HTML e CSS 1
G [RISOLTO][Javascript] aggiungere elemento ad array definito nella finestra madre da popup Javascript 4
M come creare un popup con CSS da una pagina esterna? jQuery 1
S [CERCO] spazio web per piccolo popup Fb, pago euro 10 ogni 1000 aperture Vendere e Acquistare pubblicita' online 0
F Switch Popup jQuery 0
T [ASP] controllare popup Classic ASP 3
Shyson Aprire finestra popup con Safari Javascript 6
L Problema per centrare titolo PopUp HTML e CSS 5
F popup che si apre SOLO alla prima pagina visitata, qualunque essa sia Javascript 16
L effetto galleria popup (immagini) jQuery 1
Shyson Impedire che il popup sparisca Javascript 0
S [COMPRO] PopUp Fisso Sul Tuo Sito Web dai 300 ai 4000€ al mese Vendere e Acquistare pubblicita' online 1
M Aprire un popup con un form jQuery 2
P SAVE FAILED popup Joomla 0
J Programmazione di un finestra tipo popup CMS (Content Management System) 1
M Print + pagina popup di ringraziamento Javascript 2
G Popup con cookie Javascript 0
M creare form in un popup HTML e CSS 1
B Creare popup con dreamweaver HTML e CSS 3
T [VBulletin] Plugin per Popup Facebook CMS (Content Management System) 0
L popup che blocca la pagina .. quasi completato mi date un aiuto? jQuery 1
E Centrare finestra popup Javascript 7
A richiamare funzione javascript dopo login in popup. Javascript 0
andrea.peo Java popup con ricerca e invio Javascript 0
S finestre popup HTML e CSS 2
S devo creare un popup con metodo post HTML e CSS 0
F Problema finestra popup jQuery 4
A struts2 + jsp + modal popup Java 2
D Popup facebook HTML HTML e CSS 4
Shyson Mettere immagine per chiudere popup HTML e CSS 1
Shyson Onclick apre popup nel posto sbagliato Javascript 0
T Eludere blocco popup Javascript 0
D Popup con form post Javascript 1
H Oscurare pagina con popup interno? Javascript 4
H Azione alla chiusura di una finestra popup? PHP 1
R aiuto popup PHP 9
F offro cpm tramite popup 1,10 euro ogni 1000 Guadagnare col Sito 0
Web Designer Popup Mycode MyBB CMS (Content Management System) 0
Vale2 PopUp al submit del form Snippet Javascript 0

Discussioni simili