the following code displays a pop up message on page load and creates a cookie so that when the user returns to the page they will not see the pop up message once. the cookie’s lifespan is based on time. i’d like to modify this code so the cookie’s life span is based on the user session or one day. any guidance or code snippets would be great. thanks.
link to code demo: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="jquery-latest.pack.js"></SCRIPT>
<SCRIPT>
$(document).ready(function() {
//if the cookie hasLaunch is not set, then show the modal window
if (!readCookie('hasLaunch')) {
//launch it
launchWindow('#dialog');
//then set the cookie, so next time the modal won't be displaying again.
createCookie('hasLaunch', 1, 365);
}
//if close button is clicked
$('.window #close').click(function () {
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function launchWindow(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height());
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
}
</SCRIPT>
<STYLE>
body {
FONT-FAMILY: verdana; FONT-SIZE: 15px
}
A {
COLOR: #333; TEXT-DECORATION: none
}
A:hover {
COLOR: #ccc; TEXT-DECORATION: none
}
#mask {
Z-INDEX: 9000; POSITION: absolute; BACKGROUND-COLOR: #000; DISPLAY: none; TOP: 0px; LEFT: 0px
}
#boxes .window {
Z-INDEX: 9999; POSITION: fixed; PADDING-BOTTOM: 20px; PADDING-LEFT: 20px; WIDTH: 640px; PADDING-RIGHT: 20px; DISPLAY: none; HEIGHT: 385px; PADDING-TOP: 20px
}
#boxes #dialog {
PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 10px; WIDTH: 640px; PADDING-RIGHT: 10px; HEIGHT: 385px; PADDING-TOP: 10px
}
.redbox {
color: #F00; font-weight: bold;
}
.bold {
font-weight: bold;
}
</STYLE>
<div id=boxes>
<div id=dialog class=window><span class="redbox"> pop up message <A
href="#" class="bold"> Ok </a> </div>
<div id=mask>
</div></div>
</html>
A session cookie is a cookie without an expiration time, so change this:
to: