You can set a cookie when shadow box is displayed
Here is fiddle i have worked on http://jsfiddle.net/gd7Xz/ Working Fiddle of your Code http://jsfiddle.net/G3XAb/
Hope this Helps you, Please tick the Answer
<!DOCTYPE html>
<html>
<head>
<style>
#ShadowBox {
width: 100px;
height: 100px;
display: block;
background-color: blue;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
//function for settinf the cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
//function for reading cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
//For Setting the Cookie, you can call this onload or at the displaying of the shadowbox.
function MarkVisited() {
setCookie("visited", "visited", 10)
}
function ClearCookie(cname) {
setCookie(cname, "", 1)
}
//Put this in the document ready section. so it runs at onload
$(document).ready(function() {
if (getCookie('visited') == "") {
$('#ShadowBox').show();
}
MarkVisited();
});
// On Load Section End
</script>
</head>
<body>
<div id="ShadowBox"></div>
<button id="ClearCookie" onClick="ClearCookie('visited')">Clear Cookie</button>
</body>
</html>