All About Coding - Programming and Software Tutorials

JavaScript Pop Up Window Tutorial

Introduction:

Have you ever needed to open a new window, but didn't like the lack of control that a simple hyperlink gives you? Then this tutorials for you. With just a small amount of code you can open up a new window and control the dimension, show or hide the title bars, address bar, scroll bars and other aspects of the new window.

Let's Get Started:

1. Ok this is an easy one. Lets start off with a breakdown of our function call.

open ( URL, windowName, features)

URL - This is the URL for the new page to open.
Window Name - This is a unique name you give your new window so that you can access it again if needed.
Features - This is a coma seperated list of options that you can have for your new window

Here is a couple of samples:
window.open ('http://www.allaboutcoding.com', 'myWindow');
window.open ('http://www.allaboutcoding.com', 'myWindow', 'status=0, toolbar=0, resizable=0' );

2. Before we can really use this it would be really nice to know what different options you have for your popup window.
Well lucky for you I've compiled a list of the most common available options.

status - Displays/Hides status bar at the bottom of the window
toolbar - Displays/Hides tool bar at the top of the window.
menubar - Displays/Hides menu bar at the top of the window
resizable - Enables/Disables the ability for the user to resize the window
scrollbars - Enables/Disables the windows scroll bars
width - Sets the width of the new window
height - Sets the height of the new window

3. Now lets make this into something usable. Lets add our JavaScript to a hyperlinks onClick event.

Click here to open popup window

<a href="javascript:void" onClick="javascript: window.open('http://www.allaboutcoding.com','myWindow','width=1000')">Click here to open popup window</a>

Conclusion:

Congratulations your done. Enjoy