Tutorials

Popup Windows

      Pop up windows are pretty simple to understand. But I'll make it even easier. Just follow the step by step instrutions below and you will be able to make a pop up window for anythng you want it to be.

Blank Pop up Sheet

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=,
scrollbars=,
location=,
statusbar=,
menubar=,
resizable=,
width=,
height=,
left=,
top=');");
}
// End -->
</script>

Copy the above code and we will fill it in as we go.

Step 1
You see all this,

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
That's not anything you want to play with. So don't mess with it.

Step 2
As for the second step we accually do something. In the code you should see a good amount of something=. They are waht we are gonna fill out in these next 10 steps. It may sound long, but each step is really short, so let's get started.

Step 3
The first thing you need to fill out is wether or not you want the window to have the tool bar. In this case, we don't want one, so let's fill it in.

'toolbar=0,

Step 4
Now we have the code to tell wether or not there will be any scrollbars. Let's say we want one.

scrollbars=1,

Step 5
Simply fill this out as 0.

location=0,

Step 6
This part of the code tells wether or not to have the status bar, let's not have it.

statusbar=0,

Step 7
The menubar is much like the toolbar so we are gonna say no to that too.

menubar=0,

Step 8
This code is to decide wether users viewing the pop up window can resize the window smaller or bigger. Let's have it so it can't be resized.

resizable=0,

Step 9
This is the width of you pop up window will come up as. Let's make this window be 500 pixels wide.

width=500,

Step 10
Much like the width, this determins the height of the window. Let's make the height 300 pixels high.

height=300,

Step 11
This the positioning part of the script. This part of the code tell the window to open so far from the left side of the screen. Let's have ours open 50 pixels from the left.

left=50,

Step 12
This is te other positioning part of the script. This part of the code tell the window to open so far from the top of the screen. Let's have ours open 50 pixels from the top.

top=50')

Step 13
Now for the final step you just add the end of the code to the end.
);");
}
// End -->
</script>

Step 14
Making a link to open the pop up window you just made. Simply use this code instead of the normal <a href="popup.html">.

<a href="javascript:popUp('popup.html')">Pop up</a>



---

Final Step
Now that we have created the code, this is what te finished product should be.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,
scrollbars=0,
location=0,
statusbar=0,
menubar=0,
resizable=0,
width=300,
height=200,
left=50,
top=50');");
}
// End -->
</script>

Now, let's see what we created. Click here to open the pop up window we made.

Written by: Kaze Kikotsu. Questions? Comments? Complaints? E-mail Kaze Kikotsu.