kirupa.com - Centered Pop-Up Window, Page 2

	Flash
	Basics / Animation
	ActionScript
	Special Effects
	HTML5
	CSS / HTML Basics
	Animation
	JavaScript
	Common Tasks
	Get Help

MINI SUPPORTERS:

In the previous page, you learned how to get a pop-up window working. In this page, you will learn how to modify your pop-up window so that you can use it however you wish.

First, let's take a look at your link:

javascript:Launch('<your URL>', width, height)

In my code, I had the <your URL> set to point to a file on kirupa.com. You can replace that with the page you are trying to open. The width and height fields represent the width and height of your pop-up window.

If you want your pop-up to point to Yahoo! and open in a 550x400 sized browser window, your link code would be:

javascript:Launch('http://www.yahoo.com', 550, 400)

With the link code, you can only adjust the URL and the dimensions of your pop-up window. There are more properties you can adjust with your pop-up window, and those can be modified in the JavaScript code you pasted into your HTML document.

The basic structure for opening a new window in JavaScript is:

this.open('<your URL>', "window ID", "properties")

The <your URL> argument simply tells your window what URL to display. The window ID argument is a string that allows you to refer to your new window. For example, if you want your Flash animation to load a new URL, under the target field for getURL, you would enter the window ID of your new window. This is similar to communicating with frames pages.

The properties string determines how your scrollbar looks. Whether your scrollbar will display the address bar, the status bar, horizontal/vertical scrollbars, etc. are specified here. In your code, these are the properties and their values that are used:

toolbar (yes/no)
menubar (yes/no)
location (yes/no)
scrollbar (yes/no)
resizable (yes/no)
width (number)
height (number)
top (number)
left (number)

In the above list, I also mention what type of argument each property takes. For example, toolbar takes in a yes or no argument while width takes in a numerical argument.

You can change those properties in the JavaScript itself. In my code, you will see that the window name is set to kirupa, and that is followed by the long list of properties that I listed above.

Note

For width, height, top, and left properties, you should leave them unaltered. They use the arguments from your link code, and making any modifications could cause your centered pop-up window to not work as advertised.

Conclusion
Well, you are finished with this tutorial. This code was based on the code I used in the pop-up window tutorial written many years ago. I have provided the source file, swf, and HTML files used for the example animation on the previous page:

Because of security settings in Flash, you might not be able to test the pop-up locally on your computer.

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - please drop by our friendly forums and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use