i have a popup which shows on page load. i want it to be displayed only once.
here is my code: (javascript):
<script type="text/javascript">
$(document).ready(function () {
var id = '#dialog';
//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(500);
$('#mask').fadeTo("slow", 0.9);
//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() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
and html markup here:
<div id="boxes">
<div id="dialog" class="window">
<h4 style="color:#1872AB;">Important Announcement</h4>
<div id="popupfoot" > <a href="#" class=" agree" style="color:#f00 !important;font-weight:bold;">X</a> </div>
</div>
<div id="mask"></div>
</div>
i have tried using jquery.cookies and set a counter in my javascript code.
this what i have tried:
<script type="text/javascript">
if ($.cookie('popup') != 'seen') {
$.cookie('popup', 'seen', { expires: 365, path: '/' });
$j("#dialog").delay(2000).fadeIn();
$j('#popupfoot').click(function (e)
{
$j('#dialog').fadeOut();
});
$j('#dialog').click(function (e) {
$j('#dialog').fadeOut();
});
};
</script>
how could i display it only once?
i know this question has been asked here and here
i have searched a lot but with no success.
thanks in advance