Javascript Popups
Chances are if you are reading this web page 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 web sites
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 <a>.
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.
HTML & Javascript Code:
<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>
Display:
This works with pretty much any tag that can be clicked on, so please
go ahead an 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. First the
relative or absolute URL of the web page to be opened. Secondly, a text
name for the window, and lastly 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 parent(the window that opened it) window closes
- fullscreen - Display browser in full screen 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 resizing
- status - Display the status bar or not
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.
HTML & Javascript Code:
<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>
Display:
Now that is a prime example of a worthless popup! When you make your own,
try to have them relate to your content, like a small popup that has no navigation
that just gives the definition or explanation of a word, sentence, or picture!
|