Inside Technique : One-Time Pop-up Windows : Implementing the Pop-up

To determine whether or not we display the window we use a small client cookie. We specify the cookie so that it is reusable to represent multiple pop-up windows. We arbitrarily named the cookie "s". This cookie contains the ID of all the already displayed pop-ups.

Now, when the home page loads, we check to see if this cookie exists containing the specified ID. If the cookie does not exist, we display the pop-up and set the cookie to prevent the pop-up from being displayed again. If the cookie does exist, nothing happens.

In our implementation, we do all cookie manipulations on the server. This is merely an implementation decision as this same handling can be accomplished using JavaScript on the client. We chose the server to simplify our client-side testing.

At the beginning of our home page, we execute the following ASP script. This script needs to be before any HTML is output because we may modify the page's header information.

<%
Dim bSurvey  ' Whether to display the survey

const bID="1"  ' The ID of the survey 

bSurvey=false
' Check if the survey was ever displayed
if instr(request.cookies("s"),":" & bID & ":")=0 then
  ' Survey not displayed - update cookie

  ' Expire cookie in 60 days
  response.cookies("s").expires = DateAdd("d",60,now())
  ' Set the path to the root
  response.cookies("s").path = "/"
  ' Append the ID to the cookie
  response.cookies("s") = request.cookies("s") & ":" & bID & ":"

  ' Set flag to display survey this time only
  bSurvey=true
end if
%>

We hard-coded the ID of our survey into the home page. If you are running multiple pop-ups, the constant bID could easily be calculated randomly. When this script fragment completes, we will have a boolean variable, bSurvey, that represents whether or not the survey code is going to be included on the page.

We use this boolean at the end of the page to decide whether to include the script to display the pop-up window. We include the script at the end of the page to ensure we do not download the pop-up window until the entire home page is parsed. This script is extremely simple. It merely uses the window.open() method to open a new window, position it, and display the survey:

<% if bSurvey then %>
<SCRIPT>
  window.open("/survey/displaysurvey.asp?q=" & bID,"SURVEY",
      "width=350,height=400,top=0,left=0,scrollbars=yes")
</SCRIPT>
<% end if %>

This opens the page, displaysurvey.asp, in its own window. This is our survey page but it contain anything you want. We also set the initial postion, size, and display of the scrollbars.

The last step is to make sure this window closes if the user submits the form. In our implementation, the form is submitted to another web page. After processing the form results this page returns a very short web-page with a script that closes the window:

<P class=start>Thank you for taking part in our survey.
<SCRIPT>window.close()</SCRIPT>

The short thank you notice should never be displayed (the window should close before the user sees it). However, we include it anyways as a precaution against the script failing close the window.

Conclusion
The decision to create automatic pop-up windows needs to be made carefully. When you decide to use pop-up windows you should make sure they are as unobtrusive as possible. By only displaying the window once and only when absolutely necessary, you can get maximum exposure while still respecting your users.

Also, this code is not limited to displaying pop-up windows. It can also be applied to any content you want displayed only once to your users. Simply remove the script that opens the new window and replace with any content!

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.