PageTutor.com
Popup Tutor  
by Joe Barta
PageTutor.com

Here is a popup window.

The code for that popup is this...

<script type="text/javascript">

function popup(){
  cuteLittleWindow = window.open("page.html", "littleWindow", "location=no,width=320,height=200"); 
}

</script>

Place it in between your HEAD tags like any other script. page.html is the url of the html file to load into the popup and 320 & 200 are the width & height of the window.

Then make a link that calls the function...

<a href="javascript:popup()">Here is a popup window.</a>

That's it!

Here is the script on a page all by itself.

What if you wanted a bunch of popup links all on the same page? Easy, just change the function a little to accept any url...

function popup(url){
  cuteLittleWindow = window.open(url, "littleWindow", "location=no,width=320,height=200"); 
}

and then pass a url to it when you click on the link.

<a href="javascript:popup('red.html')">Here is a popup window.</a>

Here is this example on a page by itself.


Now for a few FAQs...

I'll defer to the kind folks at irt.org. They have a FAQ list for nearly every javascript topic. I'll point you to their JavaScript Window FAQ to answer the inevitable questions that will soon bubble up.


What else can we do with this? Plenty. But I think we'll just get into one more thing... using the popup as a remote control to control the opening window.

Here is an example.

It's the same as the simple popup, it just has some coding in the loaded document that points links back to the opening document. Here is that document, view the source to see the coding. It's really very simple. (Note the links won't work when the window is not a popup.)

And those are the basics of making a popup window.