Working With Popups
This will help you in uncovering the mystery of popup layouts. Yes! That's the aim of this tutorial. Aren't you excited? Now, let's begin.
Step 1: Requirements
You should have read and understood the Button Basics tutorial since we're going to use buttons for this one. And, since this is a JavaScript tutorial, you should have JavaScript enabled in your browser. That's just about it.
Step 2: The Code
Here's the code that we'll be using:
<input type="button" value="PopUp!" onclick="window.open('http://blinding-light.com','myPopup','width=500,height=400,menubar=1,toolbar=1,location=1,directories=1,status=1,scrollbars=1,resizable=0');">
The code above will look like this:
Just change the underlined text to whatever you want. The code above is just an example and it'll work best if it's only one line.
You can also use images or text in making the popup instead of a button. This is where the Button Basics tutorial comes in.
What it does is that it will open Blinding-Light.COM in a new window 500x400 in size. The popup will have all the browser toolbars but you won't be able to resize it because we have this code: resizable=0.
If you want to be able to resize it, just change 0 to 1. If you also don't like to see some of the browser toolbars, change 1 to 0.
To explain browser toolbars further, read on...
Step 3: Illustration
This is what a normal browser would look like:
This illustration also points out the toolbars so you'll know what you want to remove or keep in your popup window.
Conclusion
Didn't that shed light to the mysteries surrounding popup layouts? You'll realize that it wasn't so hard after all. I hope this helped you.
If you have any questions or if you want to discuss this tutorial, you may post at Blinding Light MB.