Sign up here if you'd like to be notified when new tutorials are added to the site.
Pop-ups are great for loading large graphics from small thumbnails, small email forms and all kinds of other uses where you want to keep a connection with a main page.
This is a simple introduction to pop-up windows using the most functional and easy to use code that I have found in my 10 years of front-end web development. Check back later for additions to this tip where we'll explore special effects like making the pop-up move across the screen, shake (scary) or even using it as a remote control for the rest of your site.
This code goes in the <body></body> portion of the HTML document and will open a window 360 px wide and 460 px high. (Click the red link below to open a sample pop-up)
This code can be used to open any web formatted file, i.e. instead of "popup.html" you could set it to open a JPEG or GIF image, a PDF, even another script or form.
You can open a pop-up from any link such as a linked image - not just a text link.
This example pop-up link is entitled "Popup" but you can name it any single word title you like - by the way, in this case, even something like "ThisIsMyCrazyPopUp" is considered one word ;-).
You can change the dimensions to anything you like, but remember that different browsers render and display things differently. To be safe, particularly in pop-ups that aren't supposed to resize, I add about 20 px to both dimensions.