How to make a popup window

Did you see the motorbike on this page after it loaded? well thats what we are gonna show you how to make, and it really is as easy as 1-2-3 JavaScript Popup! So lets get started.

If you havent already downloaded the software go here and download free. Follow the installation instructions and run it on your P.C.

Installing the javascript pop-up software.

When you run the pop-up software you should see a window like this:

Loading a template.

Ok so far? Then lets go on. Next we are gonna load one of the default popup window template projects included with the software. So Choose 'File'- 'New ProjectTemplate'. Like this below:

As you see there are a lot of different templates to choose from. But as we are doing the transparency template, Go ahead and choose the transparent template and click 'Open'

Create a working directory and saving popup window project.

So now what you wanna do is Create a directory where you are going to work and save the project. The best place would be your Webpage directory, but for this example we are going to do it on the desktop. So go to -File-Save As- and save the pop-up window project files in the directory you just created.

We have just called the file 'Transparent' to be simple , but you can call it anything you want here. Also note it has loaded an image of 'Spiderman' which we will change very soon!

So now you've saved your basic pop-up project have a quick look (if you want) in the directory to see the files you have created. It should have these two files inside.

Now for the fun part! First get your pop-up transparent image, preferably a GIF type file and put it into the directory with the project files you saw above. I have just changed the directory settings to thumbnails to show you what I am doing here.

Changing Popup HTML settings.

So now lets change the settings in the HTML popup editor window to the settings shown below

Change from the above to the below. The actual popup window picture we are working with is 400x300, yours could be different, so you would put in your own settings here.

It still dosent look correct , Right! well theres one more thing to do and it will be perfectly located within the transparent pop-up window.
Go to the settings on the right side of the software window and where it has input boxes for 'Size/Position' Enter the values for the size of the pop-up window.

Ok now if you push Refresh you wil see that the image is located in the popup. So now to make the popup do different effects I am going to adjust some of the values in the left selection boxes. I want to do the following:

• Remove the title bar
• Make the background transparent
• Make it appear on screen after 1 second(depending on page load time)
• Slide across the screen
• Stop at the right hand side of the screen and fade out after 5 seconds

Of course as you can see there are many more dynamic choices for you to make to the popup's style, size and effects here , but as I said earlier , the object of this tutorial is a sliding transparent image.

So now if you push the refresh button you can see the final effect of what your javascript and HTML popup should look like on your webpage.

Cool yes!! But we havent quite finished we now have acheived the effect we want so now we need to implement it into our webpage.

Again dont be afraid this part is just as easy as the previous, Thats if your still with us :-) .

Saving and compiling the javascript popup generator.

So the final Stages. Now we have to save our project, compile it and transfer it to our HTML file. So first save the project, then go to the compile button on the icon menu bar and press the compile button shown below. If you didnt save first you will be asked to save, just press 'yes' and continue.

You should be presented with the following window after compiling the project. Dont close it just yet. Also note the button 'Copy to clipboard'.

Now go to the original directory you created and look at the new files that have been compiled, you should have the same files as listed below.

Saving to HTML file.

So now first thing you need to do is transfer the relevant files to you webpage directory. In this case these are:

• motorbike.gif ( The bike )
• close.gif ( The close button , you could change this for another image ))
• transparent.js( the Javascript file for this popup )
• transparent_adplib.js ( the Javascript library for this popup )

And lastly you need to update your HTML file in the page you want the pop up to show. In this case we have done it on this page you are viewing now.

So do you remember the previous compile window and the 'copy to clipboard' button, thats right go back to that and press it. that will copy the relevant code to you clipboard. Now open the text editor you use for editing your HTML filesand locate (near the top) the /head tag or body tag. and paste the code into the file like below and save it, SIMPLE!

Now when you run you HTML file it will show the pop up as it does in this page here.
Try it out and have fun.