Javascripts 3 Popups 1 HTML Tutorials

OzWebWeaver • Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • HTML Beginners Tutorials • Advanced HTML Tutorials • JavaScripts • Web Page Tutorials

	Advanced Section
JAVASCRIPT 3

POPUP TUTORIAL - THE BASICS

Before you start adding Popups to your site, be aware that they have become such a nuisance that a lot of people have blocked them. So only use them if there is a legitimate reason to do so. You should also add an alternative link for those who have popups blocked.

This script is not available as a zipped download. You can simply copy the parts you want, by highlighting them, then using CTRL+C to copy, CTRL+V to paste in an appropriate text file.

First create a new file and call it "pop1.html" or similar. Start it with the usual code. You will be copying and pasting directly from this page. If you don't know how to do any of this either go to the Beginners section of Oz Web Weaver or, if you are desperate, click Help and contact me.

THE BASICS

Firstly, the basics.

Popups should always come to the front
Popups are activated from a link
Different links can target the same popup
Popups can also be activated from images, images maps & forms

First we are going to create a popup that is opened from a link. We start with the part that goes into the <HEAD> section of your page to tell the browser that JavaScript is going to be used:

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=500,height=250,scrollbars=yes');
return false;
}
//-->
</SCRIPT>

Copy and paste the above into the <HEAD> section of your page, just before </HEAD> will be fine. In the main part of you page we will put the link. (Or you could include an image file instead - see later.)

The next step is to create the link that makes the script work. A link like the following will activate the script:

<A HREF="popex1.html"
onClick="return popup(this, 'popex1')">First Popup</A>

which creates this clickable link to the popup: First Popup

The URL of the page being linked to is in the HREF attribute with an additional attribute called onClick. Copy the code as it is into your page, modifying it where necessary to the location & name of your popup page. Note that every popup window on your site must have a unique name. The second part of the popup() 'popex1' indicates the name of this popup window, which is "popex1". You can call it anything you like, but use something relevant, or even the name of the file you are linking to, as I have done here. Make sure the name is in single quotes.

So if you want to name the popup 'popex1' then this would be the code:

<A HREF="popex1.html" onClick="return popup(this, 'popex1')">First Popup</A>

IMPORTANT

The command in onClick MUST begin with return or the script won't work. Also make sure there are no spaces in the page name between the single quotes. If you do, the link will act just like any normal link.

The first time the user clicks the link the popup appears up in front of the page, but if they then click back on the main page again without closing the popup and then click on a link to open the popup again, it will still be there but hidden "under" the page, giving the impression that the link didn't work.

So, it is a good idea to give the user some way to close the popup. The easiest is simply to put something like this in the popup window:

Close this popup by clicking the X in the top right corner.

Secondly, you can make the popup come to the front each time using the following code in the popup page itself. So, for example, the link above opens the page "popex1.html", so the following code is in the "popex1.html" page, not the main page.

<SCRIPT TYPE="text/javascript">
<!--
window.focus();
//-->
</SCRIPT>

This bit of code tells the browser to put the focus on the popup, which means that the popup will always come to the front.

THE ALTERNATIVE LINK

As I mentioned earlier, some people have popups blocked. You should include a separate link and an explanation like this:

If you have popups blocked, please click HERE

USING AN IMAGE FILE

Here is the same idea using an image file as a link. Just click the turtle:

Here is the code:

<A HREF="popex2.html" onClick="return popup(this, 'popex2')"
<IMG SRC="images/turtle.gif" WIDTH=92 HEIGHT=44 BORDER="0" ALT="Click here"></A>

Once again we need an alternative link:

If you have popups blocked, please click HERE

On the next page we'll look at the parameters that can be included.