Creating a pop-up window that only displays once per user
This was a question I answered recently on experts-exchange, and, considering the verbosity of it all, I thought I’d capture it for anyone that might find it useful.
The poster wanted to create a popup window using HTML and JavaScript that would open when the page first loaded, but then, if the user navigates away from that page, and then came back, would not bother them by popping up again.
Here’s the solution:
The command for a popup window is:
window.open();
To make the window open when the user first comes to your page, you put the popup in the HTML <body> tag like this:
<body onLoad=”window.open();”>
There are some additional parameters you can pass to window.open() to do things like set the name, the size etc.
If you want to make sure the popup only happens once per session for a user (so it doesn’t pop up every time) you need to set a session cookie.
The session cookie is stored on the person’s computer and is erased once they close their browser window. This is useful for making sure that the NEXT time they visit the site, they will see the popup again.
If you don’t want the user to ever see the popup again after the first time, use a regular cookie that doesn’t expire, or expires in a very long time.
These are some excellent tutorials on setting and reading cookies. You’ll have to brush up on your JavaScript skills a little.
http://www.quirksmode.org/js/cookies.htm
http://www.w3schools.com/js/js_cookies.a
For a general tutorial on JavaScript, check these guys out:
http://www.w3schools.com/js/default.asp
Here are all the parameters you can pass to window.open to do all sorts of neat things with the popup window. This page is a little technical, so maybe wait until you’ve got a basic window working before trying to tweak the popup window with help from this link:
http://www.w3schools.com/htmldom/met_win
Cookies will probably be the hardest part for you to implement. So I’m just going to copy and paste some code here, straight out of the w3schools tutorial, with a bit of explanation and some specific code for you:
first, in the <head> of your HTML page, start with your <script> tag:
<script type=”text/javascript” language=”JavaScript”>
// the rest will go inside here (see below)
</script>
Okay, now, copy and paste the following functions into the area we’ve left for the Script tags.
function mySetCookie(c_name,value,expiredays)
{var exdate=new Date()exdate.setDate(exdate.getDate()+ex
document.cookie=c_name+ “=” +escape(value)+
((expiredays==null) ? “” : “;expires=”+exdate.toGMTString())
}
function myGetCookie(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_star
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_sta
}
}
return “”
}
// —————————————-
Okay, those are the functions we’ll use to set and retrieve the cookie to see if the user has already seen the popup window.
Now here’s the custom code that you’ll put after the code you just copied and pasted (still inside the SCRIPT tags). We want to check if the user has already got a cookie. If so, it means the user has already been to this page and (presumably) seen the popup already, so we don’t display it again. Otherwise, we display it.
function showPopupOnce() {
var hasSeenPopup = myGetCookie(”has_seen_popup”);
if (hasSeenPopup == null || hasSeenPopup == “”){
// the user has never seen the popup, so show him!
window.open(”http://mywebsite.com/popup.
}
// either way, set the cookie so the user will never see the window again
mySetCookie(”has_seen_popup”, “true”, 365); // 365 days = 1 year
}
// ——————————
Okay, great, now the only thing to do is make sure that the showPopupOnce() function runs whenever the page loads. Go into the <body> tag and change it to this:
<body onLoad=”showPopupOnce();”>
That should do the trick.
Tom