jquery popup window that opens on page load - need to only happen once!

[webdeveloper]

I followed the steps on
http://www.dynamicdrive.com/forums/s...ad.php?t=56899

and have successfully created a pop on page load as they suggested but what I can get done is to make this pop up only happen once. I added the script that that old post said but the pop up still displays every time. Here's the live page, go to it and you'll see the pop up and then navigate away from that page and click the back button in your browser - you'll see that the pop up displays again -
http://mitchellschocolates.com/index3.html

This is the script that I used -

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<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(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()/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();
	});		
	
});

if (once_per_session==0)
		loadpopunder()
	else
	{
	if (get_cookie('popunder')==''){
		loadpopunder()
		document.cookie="popunder=yes"
	}
	}
//Pop-under window II- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script

//Pop-under only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause popunder to load every time page is loaded
var once_per_session=1


</script>


<style type="text/css">

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:547px;
  height:340px;
  display:none;
  z-index:9999;
  padding:20px;
}
#boxes #dialog {
  width:547px;
  height:340px;
  padding:10px;
  background-color:#ffffff;
}
</style>

and this is in the body-

<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
<img src="images/coupon2011.jpg" width="507" height="300" /> <a href="#" class="close"><img src="images/closelabel.gif" width="66" height="22" /></a>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>

That old forum post said to use this-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {	

	if (once_per_session==0)
		loadpopunder()
	else
	{
	if (get_cookie('popunder')==''){
		loadpopunder()
		document.cookie="popunder=yes"
	}
	}

	

});
</script>

<script type="text/javascript">

//Pop-under window II- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script

//Pop-under only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause popunder to load every time page is loaded
var once_per_session=1

///No editing beyond here required/////

function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { // if cookie exists
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset);
      // set index of end of cookie value
      if (end == -1)
         end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
      }
   }
  return returnvalue;
}

function loadornot(){
if (get_cookie('popunder')==''){
loadpopunder()
document.cookie="popunder=yes"
}
}
function loadpopunder(){
var id = '#popup';
			
		
		//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()/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>

But when I did that the page would no longer perform the pop up- I thought it was because of the var id = '#popup'; so I changed that to var id = '#dialog'; but still no luck. Any help would be greatly appreciated, thank you.

[ibullock]

You're calling a function called "loadpopunder()" that doesn't exist in your script.

What you've done is moved the code from within this function into the document load, so it happens every time the page is loaded, regardless of the status of the cookie. You need to move the code into a function with this name like the example code you posted.

if (once_per_session==0)
		loadpopunder()
	else
	{
	if (get_cookie('popunder')==''){
		loadpopunder()
		document.cookie="popunder=yes"
	}
	}

[webdeveloper]

that function is present -

check out the code -

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

var id = '#popup';

//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()/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>

<script type="text/javascript">

//Pop-under window II- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script

//Pop-under only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause popunder to load every time page is loaded
var once_per_session=1

///No editing beyond here required/////

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function loadpopunder(){
if (get_cookie('popunder')==''){
loadpopunder()
document.cookie="popunder=yes"
}
}
function loadpopunder(){
if (once_per_session==0)
loadpopunder()
else
{
if (get_cookie('popunder')==''){
loadpopunder()
document.cookie="popunder=yes"
}
}
}
</script>


<style type="text/css">

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:547px;
height:340px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #popup {
width:547px;
height:340px;
padding:10px;
background-color:#ffffff;
}
</style>

and in the body -

<div style="top: 199.5px; left: 551.5px; display: none;" id="popup" class="window">
<img src="images/coupon2011.jpg" width="507" height="300" /> <a href="#" class="close"><img src="images/closelabel.gif" width="66" height="22" /></a>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>

this is the page to see the live version -
http://www.mitchellschocolates.com/index3N.html

and I've tried moving the var id = '#popup'; outta the $(document).ready(function() { but then the pop up would not occur. Any ideas of how to make this happen how I'd like? Thanks in advance!