Make A Popup Window

Name: Make A Popup Window
Rating: 3 (1 reviews)
Author: Oliver

Ok, so this simple tutorial is going to show you how to make a javascript popup window.

To start off lets start our code:

JavaScript Code

<script language="JavaScript">

This tells the browser what type of code it is

JavaScript Code

function popUp(URL) {

This defines our function

JavaScript Code

eval("page" + id + " = window.open(URL, '" + id + "', '

This evaluates the code and prepares the window to open.

JavaScript Code

toolbar=1,

This decides if you want the toolbar to show in your popup window, 1 for yes 0 for no.

JavaScript Code

scrollbars=1,

Do you want scroll bars? 1 for yes, 0 for no

JavaScript Code

location=1,

Do you want to show the location (address bar)? 1 for yes, 0 for no

JavaScript Code

statusbar=1,

Do you want to show the status bar? 1 for yes, 0 for no

JavaScript Code

menubar=1,

Show the menu bar? 1 for yes, 0 for no

JavaScript Code

resizable=1,

Make it resizeable? 1 for yes, 0 for no

JavaScript Code

width=500,

Width of the window in pixels

JavaScript Code

height=500,

Height of window in pixels

JavaScript Code

left = 390,

Amount of pixels from the left hand side

JavaScript Code

top = 150');");

Amount of pixels from the top, also closes our function

JavaScript Code

}
</script>

This ends our code.

So our final code is:

JavaScript Code

<script language="JavaScript">
 
function popUp(URL) {
eval("page" + id + " = window.open(URL, '" + id + "', '
toolbar=1,
scrollbars=1,
location=1,
statusbar=1,
menubar=1,
resizable=1,
width=500,
height=500,
left = 390,
top = 150');");
}
</script>

This code goes into the <head> section of your webpage.

There are two ways of opening your window, either by a text link or by a form button. Make sure this code goes into the <body> section of your website.

To open it via a form button use this code:

JavaScript Code

<form>
<input type=button value="Open Popup" onClick="javascript:popUp('page.html')">
</form>

Make sure you edit page.html with the url of the page you want to opne in your popup window.

To open your popup window by a text link use this code:

JavaScript Code

<a href="javascript:popUp('page.html')">Open Popup[</a>

Again make sure you edit page.html

Well thats our tutorial, hopfully now you will be able to make your own pop up windows.

Author:

Oliver

Views:

2,377

Rating:

Posted on Sunday 2^nd September 2007 at 01:03 PM

Dalez

Nice tut ;> I'll be using this in the future.

Posted on Saturday 1^st September 2007 at 12:35 AM

vb_king

I kinda already posted a tutorial similar to this...