Javascript Pop Up

JavaScript Popups

Chances are, if you are reading this webpage, then you have experienced hundreds of JavaScript popup windows throughout your web surfing lifetime. Want to dish out some pain of your own creation onto unsuspecting visitors? I hope not! Because websites with irrelevant popups are bad!

However, we will show you how to make windows popup for reasonable occasions, like when you want to display extra information, or when you want to have something open a new window that isn't an HTML anchor tag (i.e. a hyperlink).

JavaScript window open Function

The window.open() function creates a new browser window, customized to your specifications, without the use of an HTML anchor tag. In this example, we will be making a function that utilizes the window.open() function.

Example:

<head>

<script type="text/javascript">

<!--

function myPopup() {

window.open( "http://www.google.com/" )

}

//-->

</script>

</head>

<body>

<form>

<input type="button" onClick="myPopup()" value="POP!">

</form>

<p onClick="myPopup()">CLICK ME TOO!</p>

</body>

This works with pretty much any tag that can be clicked on, so please go ahead and experiment with this fun little tool. Afterwards, read on to learn more about the different ways you can customize the JavaScript window that pops up.

JavaScript Window Open Arguments

There are three arguments that the window.open function takes:

   1. The relative or absolute URL of the webpage to be opened.
   2. The text name for the window.
   3. A long string that contains all the different properties of the window.

Naming a window is very useful if you want to manipulate it later with JavaScript. However, this is beyond the scope of this lesson, and we will instead be focusing on the different properties you can set with your brand spanking new JavaScript window. Below are some of the more important properties:

dependent - Subwindow closes if the parent window (the window that opened it) closes
fullscreen - Display browser in fullscreen mode
height - The height of the new window, in pixels
width - The width of the new window, in pixels
left - Pixel offset from the left side of the screen
top - Pixel offset from the top of the screen
resizable - Allow the user to resize the window or prevent the user from resizing, currently broken in Firefox.
status - Display or don't display the status bar

Dependent, fullscreen, resizable, and status are all examples of ON/OFF properties. You can either set them equal to zero to turn them off, or set them to one to turn them ON. There is no inbetween setting for these types of properties.

Upgraded JavaScript Popup Window

Now that we have the tools, let's make a sophisticated JavaScript popup window that we can be proud of!

Example:

<head>

<script type="text/javascript">

<!--

function myPopup2() {

window.open( "http://www.google.com/", "myWindow", 

"status = 1, height = 300, width = 300, resizable = 0" )

}

//-->

</script>

</head>

<body>

<form>

<input type="button" onClick="myPopup2()" value="POP2!">

</form>

<p onClick="myPopup2()">CLICK ME TOO!</p>

</body>

Javascript Pop Up