
| An Advanced PopUp Tutorial - Don't Lose That Sale!
by: Steve Shaw
A common use for a popup is to make it appear when the visitor exits the page. However, if you are selling a product on your web page, and the visitor has pressed that most important 'Buy now!' button, the last thing you want to happen is for a popup to appear and distract them, or even worse annoy them in a way that loses you the sale. In fact in many cases, as you have now 'closed the sale', there may be little reason for the popup to... well, pop up. The disadvantages at this particular marketing juncture certainly outweigh any advantages of using a popup. So how can we prevent an exit popup appearing when the user clicks to buy? Let's look at the normal exit popup code you could use. This code should be installed between the head tags of your HTML document.
Note that the line starting 'window.open' to the semi-colon ';' should be one continuous line with no carriage return - it is shown here on two lines for display purposes only. To make the new window popup on exit, you simply add the following code to your body tag: onUnload="popup('popup.html')" Your body tag may therefore look like the following:
Now comes the clever part where we add code to allow us to 'opt out' of the new window appearing on exit if certain circumstances exist, for example if the user clicks a 'Buy now!' button or similar.
As you can see by this code, we have set a variable to true, and then test that this variable is still true before the new window is displayed. If the variable is not true, the popup will simply not appear. To enable this, we need to then add code to all the links and buttons, where if the user clicks them we do *not* want the popup to appear. Other links and buttons we just leave well alone. onclick="exit=false;" This sets the value of the exit variable to false, so that when the test on the variable runs, it will fail and the new window will not appear. We add this code to the relevant tags for buttons and links as follows. Here's an example for a standard link: Buy now!/a>
If you want to add the code to a button rather than a link, here's an example of how you should install the code:
That's all there is to it. As always, make sure you test your web page before you upload it to your web site to make sure it works to your satisfaction.
************************************************ |
