En av våra kunder ville ha en popup som automatiskt visades första gången en besökare kom in på sidan. Syftet med denna var att kunden enligt lag var tvungen att informera besökaren om innehållet på sidan, då man måste vara 20 år eller äldre för att köpa alkoholhaltiga drycker.
Här kan ni se hur den fungerar
Detta är en Jquery popup med cookies, som då styr att den skall visas om det är första gången besökaren är på sidan, eller om cookien inte finns längre. Finns cookien så syns inte popup:en. Här kan man naturligtvis göra lite olika inställningar, beroende på hur man vill ha det.
Detta är vad som krävs för att den skall fungera:
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ ”=” +escape(value)+
((expiredays==null) ? ”” : ”;expires=”+exdate.toUTCString());
}
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + ”=”);
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(”;”,c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return ””;
}
//Popup
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0 && getCookie(”popUp”) != ”true”){
$(”#backgroundPopup”).css({
”opacity”: ”0.7″
});
$(”#backgroundPopup”).fadeIn(”slow”);
$(”#popupContact”).fadeIn(”slow”);
popupStatus = 1;
setCookie(‘popUp’,'true’,7);
}
}
//disabling popup with jQuery
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$(”#backgroundPopup”).fadeOut(”slow”);
$(”#popupContact”).fadeOut(”slow”);
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(”#popupContact”).height();
var popupWidth = $(”#popupContact”).width();
//centering
$(”#popupContact”).css({
”position”: ”absolute”,
”top”: windowHeight/2-popupHeight/2,
”left”: windowWidth/2-popupWidth/2
});
//only need force for IE6
$(”#backgroundPopup”).css({
”height”: windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
centerPopup();
loadPopup();
//CLOSING POPUP
//Click the x event!
$(”#popupContactClose”).click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
Och här är div:en för popup:en:
<div id="popupContact">
<h1>Rubrik</h1>
<p id="contactArea">
Innehåll
<a id="popupContactClose">Stäng popup</a>
</p>
</div>
<div id="backgroundPopup"></div>